必须同时添加-webkit-column-count等前缀且满足容器有明确宽度、内容为连续文档流、父容器非flex/grid三个条件，否则多列布局在旧版webkit浏览器中完全不生效。
column-count 在部分 WebKit 内核浏览器（如 iOS Safari ≤15.6、旧版 Chrome/Android WebView）中直接不生效，不是你漏写了属性，是标准属性没加 -webkit-column-count 前缀——这些浏览器只认带前缀的版本。
为什么加了 column-count: 3 却完全没反应
WebKit 旧版本（Safari ≤15.6、Chrome ≤80、多数 Android WebView）根本不解析无前缀的 column-count。DevTools 里能看到该声明被划掉，CSS 规则未应用。这不是兼容性“降级”，是彻底忽略。
-
-webkit-column-count是必须项，column-count是可选项（仅现代浏览器识别） -
column-gap同样需补-webkit-column-gap，iOS 11.3+ 才原生支持无前缀版本 -
break-inside: avoid在 Safari ≤15.6 中需额外加-webkit-column-break-inside: avoid - 别依赖
@supports (column-count: 3)检测——旧 WebKit 根本不识别这个@supports块
Less/Sass 编译时怎么自动补全前缀
Autoprefixer 对多列属性支持有限，尤其 -webkit-column-gap 和 -moz-column-rule 很少自动注入。手动封装 Mixin 更可靠：
.cols(@count: 3, @gap: 24px) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
-webkit-column-break-inside: avoid;
break-inside: avoid;
page-break-inside: avoid;
}
- 不要只封装
column-count，column-gap和break-inside必须同步补前缀 -
-moz-column-count对 Firefox ≥60 已非必需，但内网系统可能还在跑 FF 38，建议保留 - Webpack 项目中确保
postcss-loader在less-loader之后执行，否则 Autoprefixer 来不及处理生成的 CSS
移动端 Safari 的隐藏陷阱：position + 多列组合失效
即使加了前缀，iOS Safari ≤15.6 在多列容器里用 position: absolute 元素仍会错位——因为多列容器默认不创建定位上下文，绝对定位元素回溯到 。
- 必须给多列容器显式加
position: relative，且仅对直接子元素生效 - 若子元素本身是
display: flex或grid，它内部的绝对定位仍会向上回溯，需在该子元素上也加position: relative - Safari ≤15.6 中若
position: relative不生效，尝试叠加transform: translateZ(0)强制触发层叠上下文 - 避免同时设
overflow: hidden和position: relative，某些 WebView 会触发渲染 bug
真正容易被忽略的是：前缀只是入场券，column-count 要真正工作，还得满足三个硬条件——容器有明确宽度或 max-height、内容是连续文档流、父容器不能是 flex 或 grid。前缀补得再全，这三个条件缺一，照样白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
