FireFox 3列css3布局不起作用，适用于Chrome和Safari [重复]答案

【问题标题】：FireFox 3 column css3 layout doesn't work, works in Chrome and Safari [duplicate]FireFox 3列css3布局不起作用，适用于Chrome和Safari [重复]
【发布时间】：2015-03-15 20:51:53
【问题描述】：

在撰写本文时，我正在使用最新的浏览器版本。我正在尝试使用 CSS column 属性创建一个 3 列布局。

它似乎在除 FF 之外的所有地方都可以正常工作。

这是我的代码：

.row {
  -webkit-column-count: 3;
  -webkit-column-gap: 5px;
  -webkit-column-fill: auto;
  -moz-column-count: 3;
  -moz-column-gap: 5px;
  -moz-column-fill: auto;
  column-count: 3;
  column-gap: 5px;
  column-fill: auto;
}
.item {
  background: #F00;
  height: 200px;
}

<div class="row">
  <div class="item"></div>
  <div class="item"></div>
</div>

我还在 FF 中记录了这些 CSS 错误。

未知属性“列”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10876 未知属性“列计数”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10877 未知属性“列间隙”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10878 未知属性“列宽”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10879 未知属性“列填充”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10880 未知属性“-moz-column-break-inside”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10887 未知属性 'column-break-inside'。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10888 未知属性“列”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10912 未知属性“列计数”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10913 未知属性“列间隙”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10914 未知属性“列填充”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10915 未知属性“列”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10929 未知属性“列计数”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10930 未知属性“列间隙”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10931 未知属性“列填充”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10932 未知属性“列”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10948 未知属性“列计数”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10949 未知属性“列间隙”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10950 未知属性“列填充”。声明被放弃。 63f26845e7f429a90b8ae649031e4a073ade7260.css:10951 改变对象的 [[Prototype]] 会导致您的代码运行非常缓慢；而是使用 Object.create meteor.js:532 创建具有正确初始 [[Prototype]] 值的对象 “BookingsController 蛞蝓”“VBS”router.js:156 “BookingsController 蛞蝓”“VBS”router.js:156 “bookingProfile 属性”数组 [对象、对象、对象、对象、对象] profile.js:5 解析“背景”的值时出错。声明被放弃。微博

这是怎么回事？

【问题讨论】：

标签： html css firefox multiple-columns

【解决方案1】：

使用：-moz-column-fill：平衡；而不是：-moz-column-fill: auto;

感谢...-moz-column-fill: auto breaks CSS columns in Firefox

【讨论】：