悬停取决于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中只有Working One可以工作:D

---

我要的是什么......

这是Chrome的错误还是有可能使"不工作"工作.

Answer 1

这实际上是一个有趣的问题.该"问题"是由浏览器CSS被读取造成display:inline;的的a标签,而不是让它充满整个display:block;的的li标签.

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

.menu-item a {
    display:block;
}

Answer 2

添加display: block到链接.链接小于li