Le survol dépend de la taille de la police dans Chrome

Question

Ce que j'essaie...

J'essaie de créer un menu avec un effet de survol. Si vous survolez un lien, sa couleur de fond doit changer. Si vous passez au lien suivant, la couleur de fond doit changer en douceur.

---

Problème

Lorsque vous survolez un lien et que vous passez au suivant, il y a un petit espace entre les éléments. Si votre souris se trouve à cet endroit précis, rien ne se passe.

---

Exemple de travail

.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>

---

Exemple de non-fonctionnement

.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>

Mon observation

Si vous modifiez le font-size d'un seul pixel, cela fonctionne. Si j'utilise IE, les deux exemples fonctionnent, mais dans Chrome, seul celui qui fonctionne fonctionne :D

---

Ce que je demande...

S'agit-il d'un bug de Chrome ou existe-t-il une possibilité de faire fonctionner le "non fonctionnel".

Answer 1

C'est une question intéressante. Le "problème" est causé par le CSS du navigateur qui lit le fichier display:inline; de la a et qu'il ne remplisse pas la totalité de la balise display:block; de la li étiquette.

Vous pouvez remédier à ce problème en utilisant la règle CSS suivante

.menu-item a {
    display:block;
}

Answer 2

Ajouter display: block aux liens. Le lien est plus petit que le li

Answer 3

Supprimer la taille de police et l'épaisseur de ligne de l'élément de menu, styliser le lien directement. Ce comportement est probablement dû à des erreurs d'arrondi.