多列布局兼容性需守住底线：加break-inside: avoid并补WebKit前缀防截断；跨列标题必用column-span: all；小屏重置column-gap和column-rule；Safari iOS建议column-width配min-width兜底。

多列布局在断行（break）行为上，各浏览器确实存在差异，尤其在 Safari 和旧版 Edge 中表现不一致。处理兼容性问题的关键不是强行统一所有细节，而是守住底线：不让内容被意外截断、标题不劈开、小屏下不崩坏。

必须加 break-inside: avoid 并补前缀

Chrome、Firefox 默认允许 <h3></h3>、<p></p>、<img> 被跨列切割，Safari 14 及更早版本需显式加 WebKit 前缀才能生效：

• h2, h3, p, img { break-inside: avoid; }
• @supports (-webkit-column-break-inside: avoid) { h2, h3, p, img { -webkit-column-break-inside: avoid; } }
• 注意：不要对容器本身设 break-inside，它只对子元素起作用

column-span: all 是跨列标题的唯一可靠解法

当需要小标题横跨所有列（比如 <h2></h2>），仅靠 margin 或 width 拉伸不可靠，必须用：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• h2 { column-span: all; }
• 该属性在 Chrome 50+、Firefox 73+、Safari 10.1+ 支持良好；IE 完全不支持，但 IE 已淘汰，无需降级
• 避免用 display: block + width: 100% 模拟，容易因 column-gap 或 padding 导致错位

移动端断点要重置 column-gap 和 column-rule

小屏下若只设 column-count: 1 却忘了清掉 column-gap 和 column-rule，会留下空白边距或残留分隔线：

• @media (max-width: 768px) { .content { column-count: 1; column-gap: 0; column-rule: none; } }
• 别用 min-width 替代媒体查询——viewport 缩放时行为不稳定，且无法响应设备宽度变化
• Safari 在 iOS 上对 column-width 的计算偶尔偏窄，建议搭配 min-width: 16rem 容器限制兜底

避免在不支持环境 fallback 失效

如果目标仍需兼容 Safari

• 用 @supports (column-count: 2) 包裹多列样式，确保不支持时自动回退到单列流式布局
• 不要用 JavaScript 动态检测并插入样式——增加渲染延迟，且 SSR 环境下可能失效
• 真正需要兼容老浏览器时，可用 Flexbox 模拟“伪多列”（如 flex-wrap: wrap + 固定项高），但仅适用于列表类内容，不适用于连续文本

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！