firefox 默认 column-fill: balance，chrome 默认 column-fill: auto，源于实现节奏差异；firefox 自2012年起将balance设为隐式默认，需height/max-height触发平衡；chrome严格按规范默认auto，顺序填满各列，不重排。
Firefox 默认走 column-fill: balance，Chrome 默认走 column-fill: auto——这不是 bug，是浏览器对规范实现节奏不一致导致的“默认值分歧”。
Firefox 为什么看起来像“自动平衡”？
Firefox 早在 2012 年就实现了 column-fill: balance，且长期将其设为多列容器的**隐式默认行为**（哪怕你没写这行 CSS）。所以只要容器有 height 或 max-height，它就会尝试把内容均匀分到各列，视觉上高度接近一致。
而 Chrome、Safari 直到近年才完整支持 column-fill，且严格按规范：未显式声明时，column-fill 就是 auto，即“顺序填满第一列再填第二列”，不预估总高，也不回溯重排。
- 现象：同样
columns: 3+ 7 段文字，Firefox 可能每列 2–3 段，高度齐平；Chrome 第一列塞 3 段，第二列 3 段，第三列只剩 1 段，明显偏短 - 注意：
-moz-column-fill: auto在 Firefox 中是显式覆盖默认行为，不是“补缺”，而是主动退回到标准auto流程 - 旧版 Firefox（≤60）甚至不识别无前缀的
column-fill，只认-moz-column-fill
Chrome 下 column-fill: auto 的真实填充逻辑
column-fill: auto 不是“随便填”，而是严格的**顺序流式填充**：从左到右（或 top-to-bottom），按 DOM 顺序逐个元素分配，填满当前列再切下一列。它不看总高度，也不做全局调度。
- 典型后果：最后一列经常空半截，尤其当内容总量刚好卡在换列临界点（比如 8 个
li配column-count: 3→ 前两列各 3 个，第三列仅 2 个） - 浮动元素、
break-inside: avoid、大图等不可分割块会强行撑高某列，其他列不会补偿——auto模式下完全不处理这种失衡 - 响应式缩放时列数变化，
auto仍坚持“填完即止”，不会因新列数重新匀内容，容易出现视觉割裂
如何让两浏览器行为一致？
别依赖默认值，显式声明并配高度约束：
- 想统一用平衡填充：写
column-fill: balance+height或max-height（min-height不触发 balance） - 想统一用顺序填充：显式写
column-fill: auto，并确认所有浏览器都支持该属性（Chrome 50+、Firefox 13+、Safari 10.1+） - 兼容性兜底：用
@supports (column-fill: balance)包裹 balance 样式，降级时 fallback 到auto+ 固定列高模拟近似效果 - 别混用前缀：现代浏览器已支持无前缀
column-fill，但若需支持 Firefox 旧版，仍要加-moz-column-fill
真正麻烦的不是写哪一行 CSS，而是你得意识到：Firefox 的“平衡感”是历史实现惯性，Chrome 的“顺序填”才是规范本意。一旦混入图片、异步模块或 flex 嵌套，balance 就容易失效，这时候反而 auto 更可预测——只是得接受最后一列可能很短。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
