moz-columnがfirefoxで動作しない

Question

次のコードを使用して4列のグリッドを作成しようとしています。コードは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;を使用してください。

Answer 2

-moz-column-ruleプロパティはFirefoxのバージョン3.5以降でサポートされています。 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

私のためにそれが仕事だ