本文介绍通过 css 的 `overflow-x: hidden` 属性解决移动端或小屏幕下意外出现的水平溢出与滚动条问题，并提供可靠的调试方法和最佳实践。
在构建响应式网站时，一个常见却容易被忽视的问题是：在小屏幕（如手机、平板）下页面出现水平滚动条（即 overflow-x 被触发），导致用户可左右拖动——这不仅影响体验，还常暗示存在布局缺陷。根本原因通常是某个元素宽度超出视口（例如未设置 max-width: 100% 的图片、使用固定像素宽的容器、负 margin、绝对定位偏移过大，或伪元素意外撑开父容器等）。
最直接的修复方式是在响应式断点中限制 body 或根容器的水平溢出：
@media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
}⚠️ 注意：此写法仅作临时视觉遮盖，不解决根本原因。若仅加该规则仍无效，说明存在更高优先级的 CSS 规则（如 !important 声明、内联样式、更具体的选择器）覆盖了它。此时应使用浏览器开发者工具（Elements → Computed → overflow-x）检查实际生效值，并逐层排查冲突源。
✅ 推荐的长期解决方案包括：
- 为所有 img, video, iframe 添加 max-width: 100%; height: auto;
- 避免对响应式容器使用 width: 1200px 等固定值，改用 width: 100% 或 max-width
- 检查 white-space: nowrap 是否误用于长文本块
- 审查 transform: translateX() 或 left/right 绝对定位是否导致元素越界
最后提醒：overflow-x: hidden 会同时隐藏横向滚动能力与横向焦点导航（影响可访问性），因此务必优先修复布局溢出源头，而非依赖隐藏策略。
