inline-block重叠Chrome中的容器边框

Question

为什么内嵌块会在以下测试用例中重叠Chrome中容器的底部边框？

HTML：

<ul>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
  <li><a href="">test</a></li>
</ul>

CSS：

ul {
  border-bottom: 1px solid red;
  font-size: 12px;
}
li a {
  display: inline-block;
  padding: 0.4em;
  background: yellow;
}

测试用例：

http://cssdeck.com/labs/5vu2eue5

Answer 1

实际上，我找到了bug report。

如果您遇到同样问题，请注意这个问题。

Answer 2

如果您不关心子弹点，可以在link元素的vertical-align：bottom清除它：

li a {
    vertical-align:bottom;
}

Answer 3

关于计算em元素的全部内容。使用em中的圆值（0.5em，1em ..），它会得到正确的结果。

li a {
display: inline-block;
padding:0.5em;
background: yellow; 
} 

DEMO