safari中column-count需加-webkit-column-count前缀才生效，且须配合column-gap等属性的px单位和避免flex/grid父容器，否则会退化为单列。
column-count在Safari中完全不生效？先看是否漏了-webkit前缀
2026年10月的Safari（包括iOS 17.6+、macOS Sonoma）仍要求column-count带-webkit-column-count前缀才能识别，尤其在WebView、PWA或旧版Safari兼容模式下。原生CSS属性column-count本身在Safari中支持度尚可，但Less/Sass编译后若没补前缀，或直接手写未加前缀，就会被静默忽略。
常见错误现象：column-count: 3在DevTools里显示为“已划掉”，检查计算样式时看不到该声明生效。
- 必须同时写：
-webkit-column-count: 3和column-count: 3，顺序无关，但缺一不可 - 别依赖Autoprefixer——它对多列属性前缀支持极弱，
column-gap、column-rule等几乎不补-webkit- - 如果用Webpack +
less-loader，确保postcss-loader在less-loader之后执行，否则前缀根本没机会加
Safari中column-count只显示一栏？大概率是column-gap或column-width惹的祸
Safari对column-gap的rem/百分比值解析异常：iOS 15–16和部分macOS版本会将column-gap: 1.5rem渲染为0或加倍，导致列容器总宽超限，浏览器被迫退化为1列；column-width在Safari中响应滞后，横竖屏切换或缩放后常卡在旧列数，进一步掩盖column-count效果。
- 强制用px单位：
-webkit-column-gap: 24px和column-gap: 24px - 慎用
column-width：Safari ≤16.6对它支持不稳定，优先用column-count配合媒体查询控制列数 - 不要混用
column-width和column-count具体值——Safari会直接忽略column-width，但列数仍可能因间隙计算错误而异常
Flex/Grid父容器导致column-count彻底失效，Safari尤甚
只要多列容器的display是flex或grid，Safari（及所有浏览器）都会无视其内部所有column-*声明。这不是bug，是规范行为：多列布局只作用于块级格式化上下文（BFC），而Flex/Grid创建的是独立的格式化上下文。
- 修复方式只有一种：在外层包裹一层
div，设display: block并应用column-count，原Flex/Grid结构保留在内层 - 别试图用
display: contents绕过——Safari不支持该值在多列场景中的回退逻辑 - 检查DOM结构：如果用了
article或section且全局重置了display，也可能意外触发此问题
定位元素干扰、overflow:hidden截断，让Safari看起来“没分栏”
Safari对多列容器内position: absolute或overflow: hidden的组合特别敏感。前者会让绝对定位子元素脱离分栏流，回溯到body，视觉上像内容“消失”；后者则可能直接截断列尾，让人误判为没分栏。
- 给多列容器加
position: relative，否则absolute子元素找不到包含块 - 避免
overflow: hidden——改用overflow: visible，或用外层容器裁剪 - 小屏调试时，先临时设
column-count: 1确认内容是否正常渲染，排除内容本身问题
break-inside: avoid在多列容器内需搭配-webkit-column-break-inside: avoid才稳定生效，漏掉这个，卡片或图片仍会被劈开，进而破坏列流完整性，间接导致column-count表现失常。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
