Question

我正在尝试使用以下代码创建四列网格。该代码在Chrome中完美运行，但它没有在firefox中创建列。

您可以在此处查看以下代码：http://jsfiddle.net/rfTXX/1/

我已经查看了这个教程http://css-tricks.com/almanac/properties/c/columns/，我认为我的代码没问题，但仍然无法在Firefox中运行。

你能告诉我如何解决这个问题，以便它几乎可以在每个浏览器中运行吗？

CSS

#wrapper {
width: 90%;
max-width: 1100px;
min-width: 800px;
margin: 50px auto;
}

#columns {
-webkit-column-count: 4;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
-moz-column-count: 4;
-moz-column-gap: 10px;
-moz-column-fill: auto;
column-count: 4;
column-gap: 15px;
column-fill: auto;
}
</style>

HTML

<div id="wrapper">
<div id="columns">

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>


    <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

       <div class="pin">
        <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Sed feugiat consectetur pellentesque. Nam ac elit risus, 
            ac blandit dui. Duis rutrum porta tortor ut convallis.
            Duis rutrum porta tortor ut convallis.
        </p>
    </div>

 </div>
 </div>

Answer 1

尝试不使用column-fill属性，它应该可以正常工作。

或者改为使用-moz-column-fill: balance;。

Answer 2

为了安全起见，请在css中包含-moz-column-count:"your value" 并包含一个java脚本document.getElementById("lstAccessList").style.MozColumnCount = "your value"; 相信我，经过详尽的搜索，这对我有用。

Answer 3

Firefox 3.5版支持-moz-column-rule属性。 http://help.dottoro.com/lcqjxgjq.php

Answer 4

删除列填充并添加-moz-columns:4; 这对我有用

Answer 5

使用-moz-column-fill:balance代替-moz-column-fill:auto

不要问我为什么，但它适合我！

moz-column在firefox中不起作用

5 个答案: