【发布时间】：2017-04-22 02:54:52
【问题描述】：
我有一个图库，它在 Chrome 和 IE 中运行良好，但在 Firefox 中却不行。即使我在我的 CSS 中尝试使用“-moz”前缀，它仍然会加载页面，其中包含那些被浏览器注释掉并卸载的声明。
在 Chrome 和 IE 中正确加载（桌面 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 中运行的示例
【问题讨论】：
-
只要使用标准，firefox 就会喜欢它。您只使用专有句子。请参阅：drafts.csswg.org/css-multicol-1/#the-multi-column-model。您可以使用具有两个值的
columns属性，或拆分column-width和column-count。你真的不需要更多。 -
等等，不要以为只有在属性开头写
-moz-才能在firefox上工作...您需要先去文档并确保该属性存在。我建议只使用标准，所有浏览器都可以正常使用 -
你真的不再需要
-moz-前缀了……FF支持的任何东西没有它都可以工作，而任何它不支持的东西无论如何都不能工作。 -
caniuse.com/#search=column 所有浏览器都不需要任何前缀。