悬停取决于 Chrome 中的字体大小答案

【问题标题】：Hover depends on font-size in Chrome悬停取决于 Chrome 中的字体大小
【发布时间】：2017-09-05 16:00:42
【问题描述】：

我正在尝试什么...

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

问题

当您将鼠标悬停在一个链接上然后转到下一个链接时，元素之间会出现一个小间隙。如果你的鼠标正好在那个位置，什么都不会发生。

工作示例

.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 错误还是有可能使“不工作的”工作。

【问题讨论】：

这是一个非常有趣的 sn-p - 我已经在我的回答中解释了这个问题，但简而言之，这基本上是因为 a 标签的内置显示属性加上一些默认值chrome浏览器中的样式。发现得好。对于写得很好的问题 +1。
我赞成一个非常好的问题
在 Chrome 57 和 macOS 上的 Opera 44 中都可以正常工作。示例是否发生了变化，或者这是旧版 Chrome 的问题？
@OptimusCrime 我仍然可以在我的 Chrome 上复制该问题 - 如果您想澄清一下，在第二个示例中，两个 a 标记之间有一条线（1px 宽度）不应该在那里。 a 标签需要直接相邻。

标签： html css google-chrome

【解决方案1】：

从菜单项中删除字体大小和行高，直接设置链接样式。这种行为很可能来自舍入错误。

【讨论】：

【解决方案2】：

将display: block 添加到链接中。链接比li小

【讨论】：

【解决方案3】：

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

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

.menu-item a {
    display:block;
}

【讨论】：

这不是错误，是预期和期望的结果。内联元素就是这样工作的。不要说这是一个错误，因为不是。
嗨@MarcosPérezGude - 感谢您的反馈:) 我没有提到它是一个错误 - 不知道混乱来自哪里，因为我同意这不是一个错误？因此我对默认样式的解释......
天哪！对不起，我的误解。我读了You can fix this bug... 和你写的You can fix this by...，非常抱歉造成混乱。我需要回到学校阅读课程。也许我的母语不是英语...... :(