双栏错位主因是Safari对flex-wrap下flex-basis计算更保守，且box-sizing继承不一致；需在Safari/Firefox中比对Computed值，并检查HTML结构合法性。
为什么双栏布局在Chrome里正常，Safari里错位
双栏错位不是“样式没写对”，而是浏览器对 display: flex 或 float 的解析存在细微差异。Safari（尤其旧版）对 flex-wrap: wrap 下子项 flex-basis 的计算更保守，若你设了 flex: 0 1 50%，但内容区有 margin 或 padding，它可能直接把第二栏挤到下一行；而 Chrome 默认会压缩子项宽度来腾空间。更隐蔽的是 Safari 对 box-sizing: border-box 在 flex 容器内的继承支持不一致——哪怕全局写了 * { box-sizing: border-box }，某些嵌套层级下仍会退回到 content-box。
排查时别只看 Chrome：必须在 Safari（至少 v16+）和 Firefox 中同步打开 DevTools → Elements → Computed，比对同一元素的 `width`、`flex-basis` 和 `box-sizing` 实际值。
用 Flex 做双栏时，左右栏高度不一致怎么办
双栏高度不同导致底部不对齐，本质是 align-items 默认值 stretch 在起作用——它强制拉伸所有子项到容器最大高度。但如果你的左栏只有导航菜单，右栏是长列表，视觉上就明显“错位”。
这不是 bug，是设计行为。修复方式取决于你要的效果：
- 要两栏顶部对齐：给容器加
align-items: flex-start - 要内容区底部对齐（比如右栏文字末尾与左栏菜单底边平齐）：改用
align-items: flex-end，但注意这会让短栏内容“上浮” - 要真正视觉居中（比如头像+简介在左，长文本在右）：删掉
align-items，改在右栏内部用display: flex; flex-direction: column; justify-content: center单独控制 - 避免用
height: 100%强撑——它依赖父级高度，一旦某层没设height或用了min-height，整个链路就失效
Grid 双栏布局中，grid-template-columns: 1fr 3fr 为什么右边栏被截断
fr 单位不是“按比例分配剩余空间”的万能解。当容器本身没有明确宽度（比如父级是 max-width: 1200px 但没设 width），或容器内有未约束的内联元素（如没设 white-space: nowrap 的长链接），Grid 会先尝试按内容最小宽度渲染，再分配剩余空间——结果就是右边栏被压缩到刚好容下最长单词，而不是按 3:1 分配。
验证方法：在 DevTools 的 Elements 面板选中 grid 容器，看右侧 Computed 栏里的 grid-template-columns 是否显示为 1fr 3fr；如果不是，说明浏览器已降级为 auto auto。
修复优先级如下：
- 确保容器有明确宽度：加
width: 100%或min-width: 0（后者可破除 flex 容器对 grid 的干扰） - 限制内容溢出：给右栏加
overflow: hidden; text-overflow: ellipsis; white-space: nowrap（仅适用于单行） - 换用像素+百分比混合：如
grid-template-columns: 240px 1fr，固定左栏，右栏自适应 - 禁用隐式网格：显式写
grid-auto-columns: 1fr，防止浏览器偷偷创建额外列
双栏错位时，如何快速定位是 HTML 结构还是 CSS 导致
错位发生时，第一反应不该是改 CSS，而是确认 DOM 是否如你所写。浏览器对非法嵌套的静默修正（比如 <div> 塞进 <code><p></p> 里）会导致整个双栏结构“移位”——你以为的左栏容器，实际在 Elements 面板里已经变成兄弟节点。
立即学习“前端免费学习笔记（深入）”；
三步快速验证：
- 在 Chrome DevTools Elements 面板中，找灰色斜体标签或突兀缩进的节点——那是被浏览器重写的证据
- 右键左栏最外层容器 → “Edit as HTML”，删一个空格再回车：如果整个右栏跟着跳出去，说明原始结构已被破坏
- 在 Console 执行
document.querySelector('.left-column').parentElement，确认返回的确实是你的预期父容器，而不是 `` 或其他意外节点
真正难修的错位，往往藏在 HTML 合法性底下。W3C Validator（validator.w3.org）粘贴源码，重点盯 Element div not allowed as child of element p 这类报错——它不报样式问题，但一报就是结构性断裂。
