移动端横向滚动条等问题主因是 position: absolute 元素在 safari/chrome 移动版中宽度计算错误，如 left: 0; right: 0 受父容器 padding、box-sizing、dpr 小数像素四舍五入等影响导致溢出。
移动端页面横向滚动条、内容被截断、视觉错位——这些问题八成是 position: absolute 元素在 Safari 或 Chrome 移动版里“算歪了”宽度或高度，而不是你漏写了 overflow-x: hidden。
为什么 left: 0; right: 0 在 iOS 上反而触发横向滚动条
它本身不撑宽页面，但浏览器会用“父容器宽度 − left − right”反推元素宽度。一旦父容器带 padding、没设 box-sizing: border-box，或者 Safari 把滚动条宽度（约 15px）错误计入包含块，计算结果就超窗宽。
-
body默认有padding，left: 0; right: 0实际要求宽度 =body.clientWidth + padding-left + padding-right - Safari 在 DPR=2 设备上对小数像素（如
right: 0.3px）四舍五入成1px，多出的像素直接导致scrollWidth > innerWidth - 缩放为 90% 或 110% 时，
getBoundingClientRect().right可能突然 >window.innerWidth，触发溢出
修复 position: absolute 导致的横向溢出
别靠 overflow-x: hidden 掩盖，它会截断可交互区域、破坏无障碍访问。重点检查并修正定位逻辑：
- 查所有带
right的元素，确认是否同时写了left和right—— 这是最常见源头 - 把
right: -10px改成transform: translateX(10px)：不参与盒模型计算，无宽度推算风险 - 若必须用
right，只设单边：right: 0或left: 0，再配width: fit-content或max-width: 100vw - 父容器加
overflow: hidden同时设display: flow-root，确保 BFC 生效；老项目可用zoom: 1降级
绝对定位元素高度失控：别硬写 100vh
移动端 Safari 地址栏收起/键盘弹出时，100vh 仍按初始视口算，导致内容被顶出或留白。iOS 16.4+ 支持 100dvh，但它不能裸写：
- 必须用
@supports (min-height: 100dvh)包裹整条规则，否则 iOS 15 及旧 WebView 直接跳过，回退到auto高度 - 优先用
min-height: 100dvh，不是height—— 避免内容超长时被强制裁剪 - 绝对定位元素若需填高，用
top: 0; bottom: 0替代height: 100dvh，更可靠 - 兜底方案用 JS：设 CSS 变量
--vh，height: calc(var(--vh, 1vh) * 100)，并在DOMContentLoaded后立即执行 +resize防抖
真正该重构的，是滥用 position: absolute 做布局
用 top: 45% + transform: translate(-50%, -50%) 居中两个模块？这是反模式。它脱离文档流，父容器无法感知高度，响应式缩放时必然重叠或溢出。
- 主内容区域改用
display: flex+flex-direction: column，天然自适应、防重叠 - 移除所有硬编码
height和百分比top，用margin或gap控制间距 - 第三方 UI 库里藏着的绝对定位弹窗、Tooltip，要单独加
contain: layout或临时transform: translateZ(0)隔离渲染上下文
最常被忽略的是：问题不在某个 right: 0，而在整个布局范式——当 position: absolute 开始承担结构职责，溢出只是迟早的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
