Column-Count 属性在 Firefox 上不起作用答案

【问题标题】：Column-Count Property is not working on FirefoxColumn-Count 属性在 Firefox 上不起作用
【发布时间】：2018-03-24 17:25:10
【问题描述】：

我使用了 CSS3 的多列功能，使用column-count 属性拆分成多列。

这是我的代码：

div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

它不适用于我的 Firefox 版本或 Firefox 开发者版。该代码适用于：Google Chrome、Opera 和 Microsoft Edge。

这是一个错误还是有任何解决方案？

【问题讨论】：

对我来说 column-fill: auto; 导致了这个问题。

标签： css column-count

【解决方案1】：

根据Can I use...

Firefox 版本 55-59 部分支持此功能：

部分支持是指不支持break-before， break-after、break-inside 属性。基于 WebKit 和 Blink 的浏览器对非标准-webkit-column-break-* 有同等支持属性来完成相同的结果（但只有 auto 和 always 值）。 Firefox 不支持break-*。

如果您需要进一步的帮助，您需要发布代码 sn-p 来显示您的问题。

【讨论】：

部分支持 break-before、break-after、break-inside 属性，但不支持列数。请参阅：link 感谢您的评论！

【解决方案2】：

几年前我不得不从事类似的工作，据我所知，跨浏览器支持并不是万无一失的（尤其是对于旧浏览器），但这应该可以很好地工作。

https://codepen.io/patriziosotgiu/pen/jGporg?editors=1100

将column-break 放在ul 标记之外的容器中。此外，如果您必须处理更复杂的布局，一堆额外的break 属性可能会有所帮助（请参阅li）。

在 Mac 上使用最新的 Firefox、Chrome、Safari 测试。

注意：使用 flexbox 可能会给您带来更好的结果，以及更新的解决方案。如果你的项目可以使用 flexbox，值得一试。

【讨论】：

非常欢迎 Nisarg，很高兴它成功了！
@Nisarg 如果可行，您为什么不接受这个答案。让帕特里齐奥享受赏金吧。

【解决方案3】：

您需要为 ul 或主容器添加 -moz-column-gap: 50px。它将解决 Firefox 的问题。

【讨论】：