Firefox列间距比Chrome宽不是Bug，因column-gap默认值不同：Chrome/Safari用1em，Firefox用normal；解决需显式设column-gap为px/rem，禁用normal；break-inside: avoid可防块级元素跨列断裂，但仅对block等生效且父容器须启用多列；Safari中column-gap和column-rule异常需统一用px和solid；Flex/Grid父容器下column-count完全失效，须外层包裹block容器或改用Grid模拟。
column-count在Firefox里列间距比Chrome宽？
这不是Bug，是column-gap默认值不一致：Chrome/Safari用1em，Firefox用normal（约等于1em但受字体度量影响）。结果就是同样代码，在Firefox下最后一列常被挤掉或换行错乱。
解决方法很简单：显式声明column-gap：
- 用
px或rem代替em，避免嵌套字体大小干扰 - 别写
column-gap: normal——它不可控，尤其在多层font-size嵌套时 - 如果依赖精确列宽计算（比如配合
column-width做响应式），必须设column-gap: 0或固定值
内容被劈开、标题断在两列之间？
column-count本身不识别语义块，它把整个容器当纯文本流切分。所以<h3>、<figure>、<blockquote>这些块级元素，默认就会跨列断裂。
唯一有效防护是break-inside: avoid，但它有硬性前提：
立即学习“前端免费学习笔记（深入）”；
- 只对
display: block（或table、list-item）生效，flex/grid容器内直接失效 - 必须加在“要保护的直接父容器”上，比如给
<figure>加，而不是里面的<img> - 父容器必须已启用多列（即设了
column-count或column-width），否则该声明被忽略
顺便提一句：page-break-inside: avoid建议一起写，覆盖打印场景（如导出PDF）。
Safari中column-gap消失或column-rule虚线变实线？
iOS 15–16和部分macOS Safari版本对column-gap的rem或百分比值解析异常，间隙可能完全不显示，或加倍；column-rule-style: dashed则常渲染成实线。
绕过办法很直接：
-
column-gap统一用px，例如column-gap: 24px -
column-rule放弃dashed，改用column-rule: 1px solid #e0e0e0 - 需要响应式间隙？用媒体查询切换不同
px值，别试图靠相对单位自适应
Flex/Grid父容器里column-count完全不生效？
这是最隐蔽的失效点：column-count只对普通文档流（display: block）生效。一旦父容器是display: flex或display: grid，多列属性直接被忽略——子元素按Flex/Grid规则排列，column-系列全失效。
修复方式只有两种：
- 在外层再包一层
<div>，设display: block并应用column-count，内部保持Flex/Grid布局 - 彻底放弃
column-count，改用CSS Grid模拟多列（但注意：Grid不是multicol，不提供自动断行能力）
真正容易被忽略的是：这个限制跟浏览器版本无关，是规范层面的硬约束。哪怕你用了最新Chrome，只要父容器是Flex，column-count就形同虚设。
