moz-cột không hoạt động trong firefox

Question

Tôi đang cố gắng tạo lưới bốn cột bằng cách sử dụng mã sau. Mã này hoạt động hoàn hảo trong Chrome nhưng không tạo các cột trong firefox.

Bạn có thể kiểm tra mã sau đây sống ở đây: http://jsfiddle.net/rfTXX/1/

Tôi đã kiểm tra hướng dẫn này http://css-tricks.com/almanac/properties/c/columns/ và tôi nghĩ rằng mã của tôi là được rồi, nhưng nó vẫn không làm việc trong firefox.

Bạn có thể cho tôi biết cách sửa css để nó hoạt động trong hầu hết mọi trình duyệt không?

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

Cố gắng mà không có sự column-fill bất động sản, cần làm việc.

Hoặc sử dụng -moz-column-fill: balance; để thay thế.

Answer 2

Thuộc tính quy tắc -moz-cột được hỗ trợ trong Firefox từ phiên bản 3.5. http://help.dottoro.com/lcqjxgjq.php

Answer 3

Sử dụng -moz-column-fill:balance thay vì -moz-column-fill:auto

Đừng hỏi tôi tại sao nhưng nó làm việc cho tôi!

Answer 4

Chỉ cần được ở bên an toàn bao gồm -moz-column-count:"your value" trong css và bao gồm một kịch bản java document.getElementById("lstAccessList").style.MozColumnCount = "your value"; ủy thác cho tôi này làm việc cho tôi sau khi một tìm kiếm đầy đủ.

Answer 5

remove cột điền và thêm -moz-columns:4; nó làm việc cho tôi