html - tool - inspector google chrome

Hover depende del tamaño de fuente en Chrome

Question

Lo que estoy tratando ...

Estoy tratando de hacer un menú con un efecto de desplazamiento. Si pasas el cursor sobre un enlace, su color de fondo debería cambiar. Si pasas a la siguiente, debería cambiar sin problemas al siguiente enlace.

Problema

Cuando se desplaza sobre un enlace y luego se pasa al siguiente, hay un pequeño espacio entre los elementos. Si su ratón está en el lugar exacto, no pasa nada.

Ejemplo de trabajo

.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}

<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href=''#''>Menü #1</a></li>
<li class="menu-item"><a href=''#''>Menü #2</a></li>
<li class="menu-item"><a href=''#''>Menü #3</a></li>
</ul>
</div>

Ejemplo que no funciona

.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}

<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href=''#''>Menü #1</a></li>
<li class="menu-item"><a href=''#''>Menü #2</a></li>
<li class="menu-item"><a href=''#''>Menü #3</a></li>
</ul>
</div>

Mi observación

Si cambias el font-size solo por un píxel, funciona. Si uso IE, funciona en ambos ejemplos, pero en Chrome solo funciona: D

Lo que estoy pidiendo ...

¿Es esto un error de Chrome o existe la posibilidad de que funcione el "no funciona"?

Answer 1

Agregar display: block a los enlaces. El enlace es más pequeño que el li

Answer 2

Elimine el tamaño de fuente y el alto de línea del elemento de menú, aplique estilo al vínculo directamente. Este comportamiento muy probablemente proviene de errores de redondeo.

Answer 3

En realidad es una pregunta interesante. El "problema" es causado por el navegador CSS que está leyendo la display:inline; de la etiqueta a, y al no tener que llenar toda la display:block; de la etiqueta li

Puede solucionar esto usando la siguiente regla CSS

.menu-item a {
display:block;
}