moz-column在firefox中不工作

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

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

Answer 3

使用-moz-column-fill:balance，而不是-moz-column-fill:auto

不要問我爲什麼，但它爲我的作品！

Answer 4

只是要在安全方面包括CSS -moz-column-count:"your value"，包括Java腳本document.getElementById("lstAccessList").style.MozColumnCount = "your value"; 信任我這個窮舉搜索後爲我工作。

Answer 5

刪除列填充和添加-moz-columns:4; 這對我來說