Question

我有一个画廊，它在Chrome和IE中运行良好但在Firefox中没有。即使我尝试了＆＃34; -moz＆＃34;在我的CSS中，它仍然会加载页面，并在浏览器中注释掉并卸载这些声明。

在Chrome＆amp;它正确加载IE（桌面上有4列，移动上有2列）。但在Firefox中它只是一个很大的列表＆＃34;一个接一个的图像。

这是一个链接到我的代码的小提琴。 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中运行的例子

Answer 1

在媒体内部和外部查询中使用以下代码。 -moz不是必需的。
.col-4-adaptive { column-count: 2; column-gap:15px; }

moz选择器在CSS中不起作用

1 个答案: