现代项目中columns属性无需前缀，仅IE10/11和Android 4.4 WebView需-webkit-column-count；column-gap须显式声明以避免默认值差异；contenteditable下多列布局存在光标错位bug；column-count为最大列数，column-width为最小列宽，二者混用时优先级明确但受column-gap影响。
columns 属性在现代项目中基本不用写前缀，直接用标准语法即可生效。如果你的目标用户不包含 IE10/11 或 Android 4.4 WebView，加前缀反而可能引入兼容性干扰或白占体积。
哪些浏览器需要前缀？只限极少数旧环境
真正需要前缀的只有两类场景：
- IE10/11：仅识别
-webkit-column-count（伪兼容，行为不稳定，-ms-column-count不存在，别写） - Android 4.4 系统 WebView：只认
-webkit-column-count，且不支持columns简写 - Firefox 早于 52 版本（2017年前）需
-moz-column-count，但当前主流已无此需求
Chrome 50+、Firefox 52+、Safari 10.1+、Edge 79+、iOS Safari 10.3+ 全部原生支持 columns 和子属性，无需任何前缀。
column-gap 默认值不一致，必须显式声明
不同浏览器对 column-gap 的默认值解析不同：
立即学习“前端免费学习笔记（深入）”；
- Chrome / Safari：默认为
1em - Firefox：默认为
normal（约等于1em，但受字体大小影响，不可控）
这会导致列宽计算偏差——尤其当你同时设置 column-width 和 column-gap 时，Firefox 可能因间隙过大而少渲染一列。解决方法很简单：
- 统一写成
column-gap: 1rem或column-gap: 0，不依赖默认值 - 避免用
em，改用rem或px，防止嵌套font-size干扰
contenteditable + 多列布局 = 光标错位
在可编辑区域（如 div[contenteditable]）里启用 columns，WebKit 内核（Safari / 旧版 Chrome）会出现光标定位错误：点击某列文字，光标却跳到其他列甚至页面外。这不是 CSS 写错了，是已知渲染 bug。
- 无法通过 CSS 修复，只能规避
- 若必须支持编辑，改用
display: grid或 JavaScript 模拟分栏（如按字符数切段 + flex 布局） - 纯展示场景才推荐用
columns，编辑需求优先考虑替代方案
columns 和 column-count/column-width 的优先级关系
当三者混用时，规则很明确：
-
column-count是“最大列数”，不是强制列数；如果容器宽度不够，浏览器会自动减少列数 -
column-width是“最小列宽”，不是固定列宽；浏览器会尽可能满足，但可能拉宽或压缩 - 同时设置
columns: 300px 4，等价于column-width: 300px; column-count: 4，此时column-count优先级更高，但实际列宽仍受column-gap影响 - 如果
column-gap+ 所有列宽 > 容器宽度，浏览器会降级列数，而非缩小列宽
真正容易被忽略的是：多列布局本质是“流式断行”，它不控制子元素位置，也不响应 flex 或 grid 的嵌套规则——混用时布局可能意外崩塌，尤其是 Firefox 和 Chrome 渲染差异明显。别指望它和其它布局模块无缝协作。
