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（左边距）分隔，这就是它。但是在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

IE中<li>项目之间的空白区域</li>

1 个答案: