left: 0; right: 0 触发横向滚动条是因为浏览器按规范忽略 width，用“父宽−left−right”反推宽度，若父容器含 padding 或 safari 渲染误差导致计算值超窗宽，便溢出。
left: 0; right: 0 为什么反而触发横向滚动条
它本身不会撑宽页面，但一旦和 width、transform 或父容器尺寸异常叠加，就容易让浏览器反向推算出超宽值。比如父容器是 body，且没设 box-sizing: border-box，又带 padding，那 left: 0; right: 0 实际会要求元素宽度 = body.clientWidth + padding-left + padding-right —— 这个“多出来的像素”直接让 scrollWidth > innerWidth。
right: 0 和 left: 0 同时存在时，width 属性会被忽略
CSS 规范明确：对 position: absolute 或 position: fixed 元素，若同时指定 left、right 和 width，浏览器必须丢弃 width，改用 包含块宽度 − left − right 计算真实宽度。这意味着：
-
left: 0; right: 0;→ 宽度 = 父容器宽（正常） -
left: 0; right: -10px;→ 宽度 = 父容器宽 + 10px（溢出） -
left: 5px; right: 5px;→ 宽度 = 父容器宽 − 10px（安全） - 哪怕写了
width: calc(100% - 10px)，它也完全不生效
Safari 下 right: 0 更容易出问题的三个原因
同一段 CSS 在 Chrome 里没事，Safari 却出现横向滚动条，大概率不是你写错了，而是 Safari 的渲染细节更敏感：
- 把滚动条宽度（约 15px）错误计入包含块宽度，导致反向计算时多出几像素
- 在 DPR=2 设备（如 MacBook Retina、iPhone）上对小数像素四舍五入异常，比如
right: 0.3px被处理成1px - 缩放为 90% 或 110% 时，布局重排触发边界判断偏移，
getBoundingClientRect().right返回值突然 >window.innerWidth
验证方式：打开控制台，执行 $$('body')[0].scrollWidth - window.innerWidth，结果 > 1 就基本锁定是定位元素干扰。
真正有效的修复不是加 overflow-x: hidden
靠 overflow-x: hidden 掩盖只是临时止痛，尤其在移动端会截断可交互区域、破坏无障碍访问。应该从定位逻辑入手：
- 检查所有
[style*="right"]的元素，重点看是否同时写了left和right - 把
right: -Xpx改成transform: translateX(Xpx)（不参与盒模型，无宽度推算） - 如果必须用
right，确保它是非负值，并且只设单边：right: 0或left: 0，再配合width: fit-content或max-width: 100vw - 父容器务必触发 BFC：加
overflow: hidden（全方向）、display: flex或float: left，否则裁剪行为不可靠
最常被忽略的是：第三方 UI 库（比如某些 Popover 组件）内部通过 JS 动态注入 right 值，你改了 CSS 也可能被覆盖 —— 这时候得用 !important 或监听 resize + scroll 用 JS 重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
