css - moz-column 在 firefox 中不工作

Question

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

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

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

你能告诉我如何修复 css 以便它在几乎所有浏览器中都能正常工作吗？

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; 代替。