Chrome浏览器中Hover效果取决于字体大小

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中，只有"Working One"可以工作 :D

---

我的问题是...

这是Chrome的bug还是有可能让"not working one"也工作的方法呢？

- Janick Fischer

---

这是一个非常有趣的片段 - 我在我的答案中解释了问题，但简而言之，这基本上是由于a标签的内置显示属性与Chrome浏览器中的一些默认样式相结合。很好地发现了这个问题。加1分给你，因为你提出了一个非常好的问题。 - Frits

我给一个非常好的问题点了赞。 - Marcos Pérez Gude

这两个在Chrome 57和Opera 44上的macOS都可以正常工作。示例有变化还是旧版Chrome存在问题？ - OptimusCrime

@OptimusCrime 我仍然可以在我的Chrome上复制该问题 - 如果您需要一些澄清，在第二个示例中，两个a标签之间有一条单行（1像素宽）不应该存在。这些a标签需要直接相邻。 - Frits

Answer 1

这实际上是一个有趣的问题。 "问题" 是由浏览器 CSS 引起的，它读取了 a 标签的 display:inline;，而没有填满 li 标签的整个 display:block;。

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

.menu-item a {
    display:block;
}

- Frits

---

这不是一个错误，而是预期和期望的结果。内联元素就是这样工作的。不要说这是个错误，因为它并不是。 - Marcos Pérez Gude

嗨@MarcosPérezGude - 感谢您的反馈 :) 我没有提到任何关于它是一个错误的事情 - 不确定混淆来自哪里，因为我同意这不是一个错误？因此，我解释了默认样式... - Frits

天啊！对不起，我误解了。我读到“你可以修复这个错误...”，而你写的是“你可以通过...来修复这个错误”，非常抱歉造成了混淆。我需要回到学校重新学习阅读课程。也许我的母语不是英语... :( - Marcos Pérez Gude

Answer 2

将链接添加 display:block 样式，使其宽度与 li 一致。

- Cyril

Answer 3

从菜单项中移除字体大小和行高，直接为链接添加样式。此行为很可能是由于四舍五入误差导致的。

- cloned