移动端网站右侧出现随机空白溢出，排查无果求技术指导

• 修正全局盒模型与溢出设置
  你之前的CSS存在错误：overflow-x: none是无效值，正确应为overflow-x: hidden，且需要让所有子元素继承盒模型，否则仅设置html不会生效。替换为以下代码测试：

  html, body {
      box-sizing: border-box;
      overflow-x: hidden;
  }
  *, *::before, *::after {
      box-sizing: inherit;
  }
  

• 排查绝对/固定定位元素
  检查页面中所有position: absolute或position: fixed的元素，包括隐藏的弹窗、导航栏等。这类元素可能因right值设置错误、width超出视口，或者transform偏移导致页面被撑开。可以用Chrome工具的搜索功能（Ctrl+F）查找定位属性，逐个检查元素的尺寸与位置。

• 检查行内/浮动元素的溢出
  若页面存在inline-block元素或未清除浮动的元素，可能因总宽度超出容器导致父级被撑开。可以给可疑父容器临时添加overflow: hidden测试，同时检查是否滥用white-space: nowrap强制元素不换行。

• 排查Bootstrap组件与自定义扩展
  部分Bootstrap组件（如轮播、模态框）可能存在默认溢出样式，或你自定义的Bootstrap类中设置了min-width（如min-width: 400px），在小屏幕下会撑出空白。可以临时注释自定义的Bootstrap扩展代码，或替换为原生Bootstrap组件测试。

• 检查媒体查询中的错误
  重点排查自定义媒体查询中的宽度计算：比如误用width: 100vw（未考虑滚动条宽度）、calc()计算错误（如width: calc(100% + 20px)），或padding-left/right叠加后超出容器宽度。可以先注释所有自定义媒体查询，确认空白是否消失后再逐个恢复排查。

• 排查表单元素与第三方插件
  部分原生表单元素（如iOS输入框）有默认最小宽度，或第三方插件（日期选择器、图表库）生成的元素可能超出视口。可以临时移除这类元素或插件，测试空白是否消失。

• 利用Chrome工具精准定位
  在Chrome开发者工具的「布局」面板中查看所有元素的盒模型，找到宽度超出视口的元素；或右键点击html标签，选择「强制元素状态」->「overflow: hidden」，快速验证是否为溢出导致的空白。

内容的提问来源于stack exchange，提问作者JakeFromStateFarm