moz選擇器不能在CSS中工作

我有一個畫廊，它在Chrome和IE中正常工作，但在Firefox中無法正常工作。即使當我在我的CSS中嘗試「-moz」前綴時，它仍然會加載頁面，並且這些聲明由瀏覽器註釋掉並卸載。moz選擇器不能在CSS中工作

在Chrome瀏覽器中，它會正確加載（桌面4列，移動2）。但在Firefox中，它只是一個又一個大的圖像列表。

這裏是一個鏈接到我的代碼小提琴。 https://jsfiddle.net/hzLsgh1h/3/

CSS：

.container { 
    width:90%; 
    margin-left:auto; 
    margin-right:auto; 
} 
.row-wrapper-adaptive { 
    overflow: hidden; 
    column-gap: 15px; 
    column-fill: auto; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    margin-right: -15px; 
    margin-left: -15px; 
}  
.col-4-adaptive { 
    -webkit-column-count: 4; 
    -webkit-column-gap: 15px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 4; 
    -moz-column-gap: 15px; 
    -moz-column-fill: auto; 
    column-count: 4; 
}  
.col-adaptive { 
    margin-bottom: 15px; 
    -webkit-column-break-inside: avoid; 
    page-break-inside: avoid; 
    break-inside: avoid; 
} 
img { 
    display:block; 
    max-width:100%; 
    height:auto; 
} 

@media only screen and (max-width:950px) { 
    .row-wrapper-adaptive { 
    padding-left: 15px; 
    padding-right: 15px; 
    margin-left: 0px; 
    margin-right: 0px; 
    } 
    .col-4-adaptive { 
    -webkit-column-count: 2; 
    -webkit-column-gap: 15px; 
    -webkit-column-fill: auto; 
    -moz-column-count: 2; 
    -moz-column-gap: 15px; 
    -moz-column-fill: auto; 
    column-count: 2; 
    } 
}

任何幫助是非常讚賞，當然我只是忽略的東西在這裏！

編輯

即使在所有的代碼仍然不會工作在Firefox瀏覽器中沒有前綴 - 這裏是一個更新的撥弄剝離出來前綴。

https://jsfiddle.net/4box1y3b/1/

希望看到這使得它在Firefox

來源

2017-04-20 HisPowerLevelIsOver9000

只是使用標準和Firefox將明白它。你只使用專制句子。請參閱：https：//drafts.csswg.org/css-multicol-1/#the-multi-column-model。你可以使用具有兩個值的'columns'屬性，或者分割'column-width'和'column-count'。你真的不需要比這更多。 –

等等，不要以爲只有通過在屬性的開頭寫'-moz-'才能在firefox上工作......你需要在之前去找文檔，並確保屬性存在。我建議只使用標準，並且在所有瀏覽器上都可以。 –

你不需要'-moz-'前綴了......任何FF支持的東西都可以在沒有它的情況下工作，並且任何東西都不會反正工作。 – TricksfortheWeb

工作使用下面的代碼，內部和外部媒體查詢的例子。 -moz不是必需的。
.col-4-adaptive { column-count: 2; column-gap:15px; }

來源

2017-04-20 18:27:17

感謝您的迴應！我在小提琴中做出了這些變化，但仍然沒有運氣？你可以試試看，看看它是否適合你？ https://jsfiddle.net/4box1y3b/4/ – HisPowerLevelIsOver9000

當我看到你的新小提琴時，我沒有看到Mozilla和Chrome之間的任何區別。他們都從2到4列在950px。那麼到底什麼地方出了問題？ –

我看到這在Firefox - 他們只是一個大的「名單」，無論瀏覽器的大小http://imgur.com/a/XbtPC @MrLister – HisPowerLevelIsOver9000

moz選擇器不能在CSS中工作

回答

相關問題