列数属性在 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

根据Can I use...

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

Partial support refers to not supporting the break-before, break-after, break-inside properties. WebKit- and Blink-based browsers do have equivalent support for the non-standard -webkit-column-break-* properties to accomplish the same result (but only the auto and always values). Firefox does not support break-*.

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

在 Mozilla Firefox v.97.0.1 中遇到问题。将属性更改为 'balance' 在我的情况下有效。

column-fill：余额；

列数属性在 Firefox 上不工作

Column-Count Property is not working on Firefox

css

column-count

列数 属性 在 Firefox 上不工作

Column-Count Property is not working on Firefox

css

column-count

列数属性在 Firefox 上不工作