如何消除页面出现的不必要横向滚动条？

• 修正排查代码，避免工具本身引入干扰
  默认content-box盒模型下，给所有元素加border会额外增加元素宽度，反而可能掩盖或制造溢出问题，建议使用以下排查代码：

* {
  box-sizing: border-box !important;
  outline: 1px solid red !important;
}

outline 不占据文档流空间，不会改变元素原有尺寸，排查结果更准确。

• 排查特殊定位/位移元素
  负margin、transform: translateX() 偏移、绝对定位超出父元素的元素，超出部分不会触发父元素的尺寸检测，边框也可能偏移出视口难以察觉。可以在开发者工具元素面板逐层选中body下的一级子元素，查看右侧布局面板的宽度是否超过视口宽度。

• 排查隐形字符间距
  行内元素、inline-block元素之间的换行、空格会产生不可见的额外间距，当父元素宽度刚好撑满视口时，额外间距就会触发溢出。可临时给父元素添加font-size: 0测试，若滚动条消失即可定位问题。

• 检查viewport配置
  移动端页面若未正确配置viewport元标签，会默认按PC端宽度渲染页面，触发横向滚动条，确认head标签内存在如下配置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 脚本快速定位溢出元素
  可直接在浏览器控制台运行以下代码，自动打印所有宽度超出视口的元素：

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
    console.log('溢出元素：', el, '元素宽度：', el.offsetWidth);
  }
})

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