Question

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

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

使用display：inline-block; http://jsfiddle.net/akrycoem/1/

使用display：table; http://jsfiddle.net/akrycoem/

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

非常感谢任何可以指出我正确方向的人，甚至可以解决我的问题！

欢呼声，

卢卡

P.S。这里有我在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

不太确定你想要达到的目标，但是，如果间隔物是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;
}

您可以使用简单列表执行类似操作，并删除spacer和红色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;
}

Firefox CSS bug＆＃34; display：inline-block＆＃34;和漂浮的元素

HTML

CSS

2 个答案:

HTML

CSS