Question

在Firefox最新版本中，它只显示一列而不是多列：

<html>
<head>
    <title>
    </title>
            <style type="">
body {
    background: url(http://subtlepatterns.com/patterns/scribble_light.png) ;
}

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

#columns:hover .pin:not(:hover) {
    opacity: 0.4;
}
        </style>

</head>
<body>
<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/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
            <p>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.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>
                Nullam eget lectus augue. Donec eu sem sit amet ligula 
                faucibus suscipit. Suspendisse rutrum turpis quis nunc 
                convallis quis aliquam mauris suscipit.
                Duis rutrum porta tortor ut convallis.
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Nullam eget lectus augue. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                Sed feugiat consectetur pellentesque. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.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.
            </p>
        </div>  

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
            <p>
                Donec a fermentum nisi. Integer dolor est, commodo ut 
                sagittis vitae, egestas at augue. Suspendisse id nulla 
                ac urna vestibulum mattis. 
            </p>
        </div>

        <div class="pin">
            <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.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.
            </p>
        </div>
    </div>
</div>
</body>
</html>

Answer 1

在.column中，删除：

-moz-column-fill: auto;

或者您可以使用：

-moz-column-fill: balance;

column-fill只是Candidate Recommendation，因此可能会有不同的浏览器行为。

让它发挥作用。

<强> JSFiddle Demo

Answer 2

删除-moz-column-fill以使其正常工作。

Answer 3

这应该可以解决问题：

#column {
    -moz-column-fill: balance;
}

Answer 4

您的新代码在此处＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt;＆gt; Problem Solved

在 chrome ，歌剧，即， firefox ， safary 中正常工作在所有浏览器中测试过！

自动 - 是一个关键字，表示按顺序填充列。

余额 - 是一个关键字，表示内容在各列之间平均分配。

CSS

  #columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;    
    -webkit-column-fill: balance;    
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: balance;
    column-count: 3;
    column-gap: 10px;
    column-fill: balance;
}

为什么这个纯css在Chrome和IE中有效但在Firefox中无效？

4 个答案: