html - 悬停取决于 Chrome 中的字体大小

Question

我正在尝试...

我正在尝试制作一个具有悬停效果的菜单。如果您将鼠标悬停在一个链接上，它的背景颜色应该会改变。如果转到下一个，它应该会顺利切换到下一个链接。

---

问题

当您将鼠标悬停在一个链接上然后转到下一个链接时，元素之间会有一个小间隙。如果您的鼠标恰好位于该位置，则不会发生任何事情。

---

工作示例

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

---

无效示例

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

我的观察

如果您将 font-size 更改一个像素，它就可以工作。如果我使用 IE，它在两个示例中都有效，但在 Chrome 中只有工作的一个有效 :D

---

我要的是...

这是 Chrome 错误还是有可能使“不工作的”起作用。

Answer 1

这实际上是一个有趣的问题。 “问题”是由正在读取 a 标记的 display:inline; 的浏览器 CSS 引起的，而不是让它填充整个 display:block ; li 标签。

您可以使用以下 CSS 规则解决此问题

.menu-item a {
    display:block;
}