list - IE 中 <li> 项之间的空白

Question

我有以下列表:

<ul class="nav">
  <li><a href="page1.html">Page 1</a></li>
  <li><a href="page2.html">Page 2</a></li>
  <li><a href="page3.html">Page 3</a></li>
  <li><a href="page4.html">Page 4</a></li>
  <li><a href="page5.html">Page 5</a></li>
</ul>

它的 CSS 如下:

ul.nav {
    text-align:right;
}

ul.nav li {
    display:inline;
}

ul.nav li a {
    font-family:'Gill Sans MT','Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
    display:inline-block;
    padding-top:20px;
    padding-bottom:0px;
    margin-left:20px;
    border-top:3px rgba(255,255,255,0) solid;
    text-decoration:none;
    font-size:18px;
    color:#333333;
}

现在，在 Chrome 中每个 <li>被 20px (The margin-left) 隔开，仅此而已。但在 IE 11 及更低版本中，它要多一些。即使我将 margin-left 设为 0px，我在 IE 中也会出现空白，但在 Chrome 中不会。然后我一直在阅读类似的问题，有人建议我把 <li>在同一行上，例如:

<ul class="nav">
  <li><a href="page1.html">Page 1</a></li><li><a href="page2.html">Page 2</a></li><li><a href="page3.html">Page 3</a></li><li><a href="page4.html">Page 4</a></li><li><a href="page5.html">Page 5</a></li>
</ul>

如果我这样做，它就解决了 IE 问题。

所以我的问题是:真的是这样吗？这看起来很愚蠢，我不得不修改我的代码，以便 IE 在我没有要求它做任何事情时得到我不想要的空白？

Answer 1

这是 inline-block 的大问题

有人用html注释来分割行:

<li>...<!---
--><li>

您可以尝试一些技巧，例如 font-size: 0 和空格更改，但最终 floating 问题要少得多。

Fighting space between inline-block