移动端横向滚动条失效的根本原因是html才是根滚动容器，body加overflow-x:hidden无效；需在html上设置overflow-x:hidden，并重置body margin、img/video等元素max-width:100%防撑宽。
移动端横向滚动条不是样式没加对，而是某个元素悄悄撑宽了 body —— 直接给 body 加 overflow-x: hidden 只是盖住症状，不解决根源。
为什么 overflow-x: hidden 加在 body 上经常失效
因为移动端浏览器的根滚动容器是 html，不是 body。iOS Safari 尤其明显：给 body 加 overflow-x: hidden 对根层溢出无约束力，还可能干扰弹性滚动行为。更糟的是，如果父容器用了 display: flex 或 display: grid，子项又没设 min-width: 0，那即使加了 overflow-x: hidden，计算阶段就已撑开，根本轮不到裁剪生效。
必须加在 html 上才真正起作用；若用在 body，需同步确保它不是 flex/grid 容器，且父级没截断溢出（比如没被 overflow: hidden 包裹）。
定位谁在偷偷撑宽视口的三步法
别猜，用 DevTools 实测：
立即学习“前端免费学习笔记（深入）”；
- 打开 Chrome DevTools → Toggle device toolbar → 选 iPhone SE（375px 宽）
- 右键
body→ “Inspect” → 看右侧 “Computed” 面板里width值是否 > 375px - 运行
getComputedStyle(document.body).width和window.innerWidth对比，差值 > 1px 就说明有隐藏撑开源
临时加 outline: 1px solid red 到 body 和它的直接子元素，能快速暴露哪个元素越界。常见“嫌疑对象”：img 没设 max-width: 100%、input[type="number"] 的默认内边距、::before/::after 伪元素偏移、transform: translateX() 脱离文档流的元素。
表格横向滚动不出现？检查这四个硬性条件
给 <table> 自己加 overflow-x: auto 永远无效。必须套一层 <div class="table-wrapper">，且满足：
-
width: 100%（或max-width: 100%），不能是display: flex的子项（会被压缩） -
overflow-x: auto，且父级不能有overflow: hidden或overscroll-behavior: contain -
min-width: fit-content（Safari 14.1+ / Chrome 107+ 支持；旧版 Safari 可退为min-width: 600px） - iOS 必加
-webkit-overflow-scrolling: touch，否则拖拽松手即回弹、无惯性
同时禁用 table-layout: fixed，除非你手动用 <col> 控制每列宽度；否则它会抑制换行，让长文本直接撑破容器。
全局防溢出的底线配置
这不是“可选优化”，是响应式布局上线前必须写的三行：
html { overflow-x: hidden; }
body { margin: 0; }
img, video, iframe { max-width: 100%; height: auto; }
再补上盒模型统一重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
注意：如果项目用了 Tailwind 或其他 CSS 框架，确认它们没覆盖掉这些规则；特别是 html 的 overflow-x，常被第三方组件重置覆盖，得提高优先级（比如加 !important 或写在最后）。
