带有“display:inline-block”和浮动元素的 Firefox CSS 错误

Question

我在使特定的 CSS 布局与 Firefox 一起使用时遇到问题。我想要实现的是一个列，其中有一些红色框将位于固定位置，然后其他一些绿色框将相应地占用可用空间。

我在 Chrome 和 Safari 中为 OSX 和 Win7 中的 IE10 测试了以下小提琴，效果很好，正如预期的那样。我遇到的唯一问题是使用“display: inline-block;”时将“Item 4”和“Item 8”推到右侧的 Firefox（OSX 的 v31，也可能是 Win）。并在使用“display: table;”时在底部切割它们。

使用显示：内联块； http://jsfiddle.net/akrycoem/1/

使用显示：表格； http://jsfiddle.net/akrycoem/

我搜索了很多关于“firefox”和“inline-block”的内容，但只能找到与非常旧的版本（v2 和 v3）相关的旧东西。谁能帮我解开这个大谜团？ 我想避免使用 JS 来实现这一点，因为我认为仅使用纯 CSS 解决方案会更好更快，尤其是每列都有很多元素。

非常感谢任何可以为我指明正确方向甚至更好地解决我的问题的人！

干杯，

卢卡

附言这里有我在 jsfiddle 中用作参考的 HTML 和 CSS 代码

HTML

<div class="column">
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <ul class="itemsList"><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li><li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li><li>Item 10</li></ul>
</div>

CSS

.column {
    width: 200px;
    float: left;
    margin-left: 30px;
    background-color: #333;
}
.column:after {
    content: ".";
    visibility: hidden;
    height: 0;
    display: block;
    clear: both;
}


.spacer {
    width: 0px;
    height: 180px;
    float: left;
    clear: left;
    background-color: #00d;
}

.redBlock {
    width: 200px;
    height: 100px;
    float: left;
    clear: left;
    background-color: #d00;
}



ul.itemsList {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ddd;
}
ul.itemsList li {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: #0d0;
    text-align: center;
}

Answer 1

不太清楚你想达到什么，但是，如果 spacer 是 180px 高，并且你想在一边堆叠 3 lis，它们不应该是每个 60px 高来填满整个空间吗？

DEMO 和 DEMO 2

ul.itemsList li {
    display: inline-block;
    width: 200px;
    height: 60px;
    line-height: 60px;
    background-color: #0d0;
    text-align: center;
}

---

你可以用一个简单的列表做类似的事情，然后去掉那些空格和红色的 div：http://jsfiddle.net/akrycoem/4/

HTML

<div class="column">
    <ul class="itemsList">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>
    </ul>
</div>

CSS

.column {
    width: 200px;
    float: left;
    margin-left: 30px;
    background-color: red;
}
ul.itemsList {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.itemsList li {
    display: table;
    width: 200px;
    height: 60px;
    line-height: 60px;
    background-color: #0d0;
    text-align: center;
}
ul.itemsList li:nth-child(3n) {
    margin-bottom:100px;
}

Answer 2

感谢 GCyrillus 的努力，但我的问题是，在我正在编写的应用程序中，红色块必须位于固定位置，并且与项目流无关。所以很可能发生红色块之间的可用空间与项目的高度不完全匹配（也可以是可变的）。所以我需要的是可以独立于盒子高度工作的东西。

经过更多的尝试和错误，我实际上在几分钟前就发现了问题！ :)

看起来 Firefox 不喜欢宽度为 0 的 .spacer。出于某种原因，这会扰乱渲染并导致错误。 所以我解决了这个问题，给 .spacer 一个宽度：1px 并将一个 margin-left:-1px 放在 .item 上。现在它神奇地适用于所有主要浏览器！ yuuhu :)

http://jsfiddle.net/ky3cqko1/

再次感谢您的帮助，我希望这对将来的某人有用...

HTML

<div class="column">
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="spacer"></div>
    <div class="redBlock"></div>
    <div class="itemsList"><div class="item">Item 1</div><div class="item">Item 2</div><div class="item">Item 3</div><div class="item">Item 4</div><div class="item">Item 5</div><div class="item">Item 6</div><div class="item">Item 7</div><div class="item">Item 8</div><div class="item">Item 9</div><div class="item">Item 10</div></div>
</div>

CSS

.column {
    width: 201px;
    margin-left: 30px;
    background-color: #333;
}
.column:after {
    content: ".";
    visibility: hidden;
    height: 0;
    display: block;
    clear: both;
}


.spacer {
    width: 1px;
    height: 180px;
    float: left;
    clear: left;
    background-color: #00d;
}

.redBlock {
    width: 200px;
    height: 100px;
    float: left;
    clear: left;
    background-color: #d00;
}



.itemsList {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ddd;
}
.item {
    display: inline-block;
    width: 200px;
    height: 50px;
    line-height: 50px;
    background-color: #0d0;
    text-align: center;
    margin-left: -1px;
}