column-rule 渲染位置偏差的本质原因是其被严格绘制在列轨道间隙中间，而该间隙位置受 column-gap、容器 padding-inline 对称性及子元素 margin 共同影响；视觉偏移实为首末列紧贴容器边缘导致的失衡，非绘制错误。
column-rule 渲染位置偏差的本质原因
这不是 column-rule 画歪了，而是它被插入在「列轨道间隙」的中间——而这个间隙的位置，取决于 column-gap 的值、容器 padding-inline 是否对称、以及子元素是否自带 margin。浏览器严格按规范把 column-rule 画在两列内容区之间，但人眼看到的“偏移”，往往来自首末列紧贴容器边缘造成的视觉失衡。
column-rule 和 column-gap 必须协同设置
column-rule 不控制列间距，只画线；column-gap 才真正分配空白空间。两者数值不匹配时，线会“悬空”在空白中，看起来像偏了。
- 若设
column-gap: 30px，又设column-rule: 2px solid #ccc，实际可用间隙只剩 28px，线会居中落在这个 28px 区域里——但人眼仍按 30px 感知，于是觉得线“往右飘” - 正确做法：让
column-rule-width纳入column-gap计算，例如column-gap: 32px+column-rule: 2px solid #ccc→ 视觉总间隙仍是 32px - 避免用
column-rule替代column-gap：有些老代码用column-rule: 1px solid transparent假装是间隙，结果线宽参与布局计算，反而挤窄列宽
修复首末列“线不对齐”的真实操作
最常见错觉：第一根线离左边缘太近，最后一根线离右边缘太远。这不是线画错了，是容器没留内边距。
- 给多列容器加
padding-inline: calc(var(--col-gap) / 2)，例如column-gap: 40px→padding-inline: 20px - 禁用
padding-left/padding-right，改用padding-inline适配 RTL（从右向左语言） - 确认子项没带
margin-inline-start或margin-inline-end—— 这些会叠加进列轨道，干扰column-rule定位基准
column-rule 在不同浏览器中的渲染差异
Firefox 旧版本（≤115）不支持 column-rule 独立生效，会回退到用 column-rule-width + column-rule-style 模拟，但若漏写 column-rule-color，线可能完全不可见；Chrome/Edge 104+ 支持 gap 简写，但 column-rule 仍需显式声明，且不响应 gap 变更。
- 兼容写法必须写全：
column-rule: 1px solid #e0e0e0，不能只写column-rule-width和column-rule-style - Safari 16.4+ 支持，但 Safari 15.6 及更早需加
-webkit-column-rule - 别指望
column-rule对column-span: all元素起作用——横跨列的标题不参与列轨道划分，自然没有“两侧”可画线
column-rule-color，却没检查容器是否漏了 padding-inline。线永远画在轨道中间，但“轨道”本身由 column-gap 和容器内边距共同定义——少一个，就偏一截。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
