内联块在 Chrome 中与容器的边框重叠答案

【问题标题】：inline-block overlaps container's border in Chrome内联块在 Chrome 中与容器的边框重叠
【发布时间】：2014-08-26 11:23:43
【问题描述】：

为什么在下面的测试用例中 inline-block 会与 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;
}

测试用例：

【问题讨论】：

【解决方案1】：

其实我找到了bug report。

如果您遇到同样的问题，请为这个问题加注星标。

【讨论】：

【解决方案2】：

如果您不关心项目符号点，您可以在链接元素上使用 vertical-align:bottom 清除它：

li a {
    vertical-align:bottom;
}

【讨论】：

【解决方案3】：

这都是关于计算em 元素的。在em like(0.5em, 1em..) 中使用圆形值，它会给出正确的结果。

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

【讨论】：