css - Firefox/IE 的间隙/边距问题

Question

我希望有一堆包含文本的矩形，它们并排放置，并在必要时换行到下一行。我为每个矩形设置了最大宽度，任何不适合矩形的文本都应该被隐藏。

这是我写的代码

HTML

<div id="outer">
    <ul id="list">
        <li>The name of soemthing</li>
        <li>Something else</li>
        <li>Something else 2</li>
        <li>Something else 3 </li>
        <li>Something else 4</li>
    </ul>
</div>

CSS

#outer {
    background-color: #0000ff;
    width: 500px;
}

#list {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

#list li {
    display: inline-block;
    max-width: 100px;
    overflow: hidden;
    white-space:nowrap;
    height: 24px;
    padding: 0px;
    background: #ff0000;
    margin: 0px;
}

它在 Chrome 中完美运行。

在 Firefox/IE 中，每个矩形之间添加了一个小的垂直间隙/边距。

我可以通过删除 LI 元素上的“溢出:隐藏”来消除间隙，但这当然允许矩形自由增长 - 这是我试图避免的。

有人知道为什么会这样吗？

Answer 1

尝试将所有 <li>标签在同一行。浏览器将换行符呈现为空白。

<div id="outer">
    <ul id="list">
        <li>The name of soemthing</li><li>Something else</li><li>Something else 2</li><li>Something else 3</li><li>Something else 4</li>
    </ul>
</div>