内联块ul li高度不合适

Question

我有一个水平导航，它使用内联块作为li标记的以下代码段：

<ul>
  <li><a href="#">HOME</a></li>
  <li><a href="#">FEATURES</a></li>
  <li><a href="#">ABOUT US</a></li>
</ul>

ul {
 list-style-type: none;                                                
 background-color: green;
} 

ul > li {
  display: inline-block;
} 

li a {
  display: block;                   
  border: 2px solid #00283a;
  padding: 2.1em 1.5em 2.5em;
}

结果： http : //jsfiddle.net/a0odv8tj/2/

• ul标签的高度：95px；
• li标签的高度：95.5938px；

但是我不知道为什么ul标签的高度不等于li标签的高度。 您能解释这个问题并帮助我解决吗？ 非常感谢！

Answer 1

也许只是一个hack，但不断变化

padding: 2.1em 1.5em 2.5em;

至：

padding: 2.0em 1.5em 2.5em;

缝来解决这个问题

Answer 2

问题与文本的线框溢出锚元素有关。 您的问题是相对于设置文本基线的位置，还是相对于折叠到文本大小的块级元素而言。

一种验证方式是设置overflow:auto; 到li a ，看事情如何扩大覆盖的元素。

我意识到，重新阅读我写的内容并不是一个很好的解释，但是自从我想到细节以来已经有一段时间了。 我可能会稍后再编辑。

或者您可以阅读有关此的规范，这可能是个好主意。