firefox 的 column-gap 默认值为 normal（约1.2em），而 chrome/safari 为 1em，导致列宽错乱；须显式声明单位如 px/rem，避免 normal 和嵌套 font-size 干扰。
Firefox 的 column-gap 默认值不一致导致列宽错乱
Chrome 和 Safari 默认用 column-gap: 1em，Firefox 却用 column-gap: normal（受字体度量影响，实际约 1.2em）。结果就是同一份 CSS，在 Firefox 下列间距变宽，最后一列常被挤出视口或换行异常。这不是 bug，是规范允许的差异。
必须显式声明单位：用 column-gap: 24px 或 column-gap: 1.5rem 替代 em 或 normal；避免嵌套 font-size 干扰计算。
- 不要写
column-gap: normal—— 它不可控，尤其在多层font-size嵌套时 - 若需响应式间隙，改用媒体查询切换 px 值，而非依赖相对单位
- Safari（iOS 15–16）对 rem 百分比解析不稳定，间隙可能消失或加倍
break-inside: avoid 在不同浏览器中生效条件不同
break-inside: avoid 是防止子项被劈开的核心手段，但它只对 display: block（或 table、list-item）生效，且必须加在“已启用多列”的容器内——否则声明被忽略。
Firefox 需额外补 page-break-inside: avoid 才能生效；Safari 旧版本（≤ iOS 14.5）不支持 column-break-inside: avoid，只认前者；而所有现代浏览器对 break-inside: avoid 的支持都要求父容器已设 column-count 或 column-width。
- 图片默认是 inline 元素，必须加
display: block才能让break-inside: avoid生效 - Flex/Grid 子元素内直接加该声明无效——它们已脱离块级流上下文
- 别加在
<p></p>内部的<span></span>上，应加在<p></p>自身上
position: absolute 元素在 columns 中脱离定位上下文
多列容器本身不构成新的定位上下文（containing block），所以 position: absolute 子元素会回溯到最近的块级祖先，常卡在第一列顶部甚至不可见。
修复方式简单但容易漏：给多列容器显式加 position: relative，它才能成为包含块；若要让某元素“钉”在某一列视觉位置，不能靠 top/left 硬调，得结合 column-span: all + 单独包装并控制宽度。
-
position: sticky在 columns 中基本不可用，浏览器不支持其在列内触发 - 绝对定位元素的
z-index在跨列场景下行为不可预测，慎用 - flex/grid 父容器内部嵌套 columns 容器，会导致定位上下文进一步混乱
column-fill: balance 在各浏览器中平衡策略不一致
column-fill: balance（默认值）会让浏览器尽量拉平各列高度，但 Chrome 倾向于把大块内容（如含图片的 <figure></figure>）塞进首列，Firefox 则更早触发换列，Safari 表现居中——结果都是末列大面积留白或内容堆积失衡。
更可控的做法是显式设 column-fill: auto，按顺序填满前一列再进下一列；但注意 Firefox 直到 v100+ 才支持该值，旧版仍强制 balance。
- 若必须用
balance，先限制容器max-height，再配overflow: hidden防撑破布局 - 图文混排时，
balance算法完全不感知图片真实高度，仅按盒模型预估，极易出错 - DOM 顺序仍是线性，视觉列序和可访问性朗读顺序永远不一致，这点无法通过 CSS 修复
break-inside、column-gap、column-fill 的解释粒度都不同。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
