Column-Count属性不适用于Firefox

Question

我使用了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。

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

Answer 1

几年前我不得不处理类似的事情，而且我记得，跨浏览器的支持并不是防弹（特别是对于旧浏览器），但这应该可以很好地工作。

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

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

在Mac上使用最新的Firefox，Chrome，Safari进行测试。

注意：使用flexbox可能会为您提供更好的结果，以及更新的解决方案。如果您的项目可以使用flexbox，那么值得尝试。

Answer 2

根据Can I use...

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

  

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

如果您需要进一步的帮助，则需要发布显示问题的代码段。

Answer 3

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