Chrome 不显示所有带有 display:inline 的列表项答案

【问题标题】：Chrome not displaying all list items with display:inlineChrome 不显示所有带有 display:inline 的列表项
【发布时间】：2013-02-23 17:26:39
【问题描述】：

所以我有一个包含 7 个项目的无序列表，它们显示为内联，并且 li 内部有空锚标签（我真的需要它们是空的和锚标签）。这是一个链接http://jsfiddle.net/FTHMf/2/。

Chrome 只显示其中的 6 个，我想知道为什么，Firefox 似乎显示所有 7 个。

另外，出于各种原因，我不想使用 inline-block。

有没有办法解决这个问题？是什么导致了问题？

谢谢！

HTML

<ul class="john">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

CSS

.john {
    width:100%;
    text-align:center;
}
.john li {
    display:inline;
}
.john li a {
    background-color:green;
    line-height:0px;
    font-size:0px;
    padding:6px;
    margin:0px 2px 0px 2px;
}

【问题讨论】：

我在给定的小提琴上看到 7 个项目 - 使用最新的 Chrome。
抱歉，我现在编辑了链接。那就是 display:inline-block 解决方案。现在它是内联的，它不起作用

标签： html css list google-chrome anchor

【解决方案1】：

无论出于何种原因，Chrome 都没有显示第一个元素。这是一个不会以任何方式影响您的 HTML/布局的方法，但让我知道它为什么会发生 - 看起来绝对是一个错误。

.john li:first-child a:after { position: absolute; content: ""; }

http://jsfiddle.net/chrisdanek/xW2e2/

【讨论】：

【解决方案2】：

@user1128245 使用这个

.john li {
    float:left;
}

【讨论】：

我宁愿不使用浮点数，正如我所说的，这个问题是可以解决的，但我只是好奇为什么 chrome 会这样做，这样我就可以避免将来出现问题。