javascript - 内联 block ul li 高度不适合

Question

我有一个水平导航，使用 li 标签的内联 block 作为以下代码片段:

<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;

接缝来解决这个问题