moz-column non funziona in firefox

Question

Sto provando a creare una griglia a quattro colonne usando il seguente codice. Il codice funziona perfettamente in Chrome ma non crea le colonne in firefox.

È possibile controllare il seguente codice vivono qui: http://jsfiddle.net/rfTXX/1/

Ho verificato questo tutorial http://css-tricks.com/almanac/properties/c/columns/ e penso che i miei codici vanno bene, ma ancora la sua non funziona in Firefox.

Potrebbe dirmi come risolvere il css in modo che funzioni in quasi tutti i browser?

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

provare senza la proprietà column-fill, dovrebbe funzionare.

Oppure utilizzare -moz-column-fill: balance;.

Answer 2

La proprietà della regola -moz-column-è supportata in Firefox dalla versione 3.5. http://help.dottoro.com/lcqjxgjq.php

Answer 3

Uso -moz-column-fill:balance invece di -moz-column-fill:auto

Non chiedetemi perché, ma funziona per me!

Answer 4

solo per essere al sicuro includere -moz-column-count:"your value" in css e includere uno script java document.getElementById("lstAccessList").style.MozColumnCount = "your value"; Fidati di me questo ha funzionato per me, dopo una ricerca esaustiva.

Answer 5

Rimuovi colonna-fill e aggiungere -moz-columns:4; E 'lavoro per me