线上网站出现多余水平滚动条，本地环境无此问题求助

针对你遇到的本地正常、线上出现多余水平滚动条的情况，可以按以下步骤排查解决：

• 给根容器添加溢出限制
  仅给body设置overflow-x: hidden可能不够，需要同时给React的根容器（通常是#root）也做限制：

  #root {
    max-width: 100vw;
    overflow-x: hidden;
  }
  

  很多情况下，根容器的子元素超出视口宽度才是滚动条出现的根源。

• 排查溢出元素并修复
  打开浏览器开发者工具（F12），在「Elements」面板中开启「Overflow」高亮功能（Chrome可在设置中找到「Show overflow」选项），逐个检查页面元素，定位宽度超出视口的元素。
  常见的溢出原因是元素使用width: 100%时未考虑padding/margin，可通过全局设置盒模型统一解决：

  * {
    box-sizing: border-box;
  }
  

  这个属性会让元素的内边距和边框包含在设定的宽度内，避免额外溢出。

• 核对线上打包后的样式差异
  本地开发环境和线上打包环境可能存在样式压缩、前缀处理的差异，对比本地与线上元素的最终渲染样式，确认是否有样式在打包后被覆盖或未正确生效。

• 应急兜底方案
  如果暂时找不到具体溢出元素，可以给html和body同时设置限制：

  html, body {
    max-width: 100vw;
    overflow-x: hidden;
  }
  

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