先别急着认定Firefox存在Bug——列间距之所以比Chrome宽，根本原因在于column-gap的默认值因浏览器而异。Chrome和Safari默认采用1em，而Firefox默认使用normal（虽近似1em，但受字体度量影响）。这导致同一段代码在Firefox中，最后一列经常被挤掉或出现换行错乱。解决思路非常直接：显式声明column-gap，改用px或rem替代em，切记不要使用normal——该值不可控，尤其在多层font-size嵌套时。如果依赖精确列宽计算（例如配合column-width实现响应式布局），直接设置column-gap: 0或固定值，最为省心。
Firefox中column-count列间距为何比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并不识别语义块，它仅将整个容器当作纯文本流进行切分。因此、这类块级元素默认就会跨列断裂。
唯一有效的防护措施是break-inside: a void，但它有严格前提：
- 只对
display: block（或table、list-item）生效，flex/grid容器内直接失效 - 必须添加在“要保护的直接父容器”上，例如给
- 父容器必须已启用多列（即设置了
column-count或column-width），否则该声明被忽略
顺便提一句：建议同时写上page-break-inside: a void，以覆盖打印场景（如导出PDF）。
Safari中column-gap消失或column-rule虚线变实线？
iOS 15–16及部分macOS Safari版本对column-gap的rem或百分比值解析异常，可能出现间隙完全不显示或加倍的情况；column-rule-style: dashed也常渲染为实线。
绕过方法非常简单：
column-gap统一使用px，例如column-gap: 24pxcolumn-rule放弃dashed，改用column-rule: 1px solid #e0e0e0- 需要响应式间隙？通过媒体查询切换不同
px值，不要依赖相对单位自适应
Flex/Grid父容器中column-count完全不生效？
这是最隐蔽的失效原因：column-count仅对普通文档流（display: block）生效。一旦父容器为display: flex或display: grid，多列属性直接被忽略——子元素按Flex/Grid规则排列，column-系列全部失效。
修复方式只有两种：
- 在外层再包裹一层
，设置display: block并应用column-count，内部保持Flex/Grid布局 - 彻底放弃
column-count，改用CSS Grid模拟多列（但注意：Grid并非multicol，不提供自动断行能力）
真正容易被忽略的是：这个限制与浏览器版本无关，属于规范层面的硬性约束。即便使用最新Chrome，只要父容器是Flex，column-count就形同虚设。
