Moz-kolumna nie działa w firefox

Question

Próbuję utworzyć siatkę czterech kolumn za pomocą następującego kodu. Kod działa idealnie w Chrome, ale nie tworzy kolumn w Firefoksie.

można sprawdzić w następujący kod żyć tutaj: http://jsfiddle.net/rfTXX/1/

Sprawdziłem ten poradnik http://css-tricks.com/almanac/properties/c/columns/ i myślę, że moje kody są w porządku, ale jeszcze jej nie działa w Firefoksie.

Czy możesz mi powiedzieć, jak naprawić css, aby działał prawie w każdej przeglądarce?

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

Spróbuj bez właściwości column-fill, to powinno działać.

Zamiast tego należy użyć -moz-column-fill: balance;.

Answer 2

Właściwość -moz-rule-rule jest obsługiwana w Firefoksie od wersji 3.5. http://help.dottoro.com/lcqjxgjq.php

Answer 3

Użyj opcji -moz-column-fill:balance zamiast -moz-column-fill:auto

Nie pytaj mnie dlaczego, ale to działa na mnie!

Answer 4

po prostu się na bezpiecznej stronie należą -moz-column-count:"your value" w CSS i obejmują skrypt java document.getElementById("lstAccessList").style.MozColumnCount = "your value"; uwierzcie mi to pracował dla mnie po wyczerpujących poszukiwaniach.

Answer 5

usuń kolumny wypełnienia i dodać -moz-columns:4; to praca dla mnie