网站响应式布局异常：文章页可无内容向右滚动，请求技术排查

我帮你排查了这个问题，这类明明看不到多余边距/内边距但页面能横向滚动的情况，大多是隐藏的元素溢出或者视口宽度计算偏差搞的鬼，给你几个具体的排查和修复方向：

• 检查绝对/固定定位元素
  有些绝对定位的元素（比如侧边悬浮组件、广告容器、页脚装饰）不在正常文档流里，DOM高亮工具可能不会直接标记它的溢出。你可以在Chrome DevTools的「Elements」面板里，逐个筛选position: absolute或position: fixed的元素，看是否有right: -XXpx、left: -XXpx或者width超过父容器的情况。也可以给可疑元素临时加outline: 2px solid red，快速定位溢出的元素。

• 排查width: 100vw的误用
  如果文章页里有元素用了width: 100vw，这个属性是基于整个视口宽度计算的，但当页面出现垂直滚动条时，100vw会包含滚动条的宽度，导致元素实际宽度超过body的可用宽度（body宽度是100vw - 滚动条宽度）。你可以把这类元素改成width: 100%，或者额外加上max-width: 100%来限制宽度。

• Flex/Grid布局的子元素溢出
  检查文章页的内容容器是否用了Flex或Grid布局。如果子元素（比如长文本段落、未设置缩放的图片）没有设置flex-shrink: 1（Flex布局）或者overflow: hidden，就可能撑爆容器导致横向滚动。可以给子元素加上max-width: 100%，或者给父容器临时加overflow-x: hidden测试，如果滚动消失了，就顺着这个方向找具体的溢出元素。

• 排查伪元素或隐藏元素
  很多时候，页面溢出是由::before/::after这类伪元素导致的——它们可能被设置了过大的宽度或偏移，但因为是伪元素，默认不会被DOM高亮工具标记。你可以在DevTools里开启「Show user agent shadow DOM」，或者直接在控制台执行这段代码：

  document.querySelectorAll('*').forEach(el => el.style.outline = '1px solid red')
  

  这段代码会给所有元素（包括伪元素）加上红色边框，能快速找到溢出的那个。

• 对比首页与文章页的全局样式
  首页显示正常，说明首页可能有body { overflow-x: hidden; }这类限制横向滚动的样式，但文章页没继承到。你可以对比两者的全局CSS，看是否有样式差异。如果是这个问题，给文章页的body和html加上overflow-x: hidden可以临时解决，但还是建议找到溢出的根源元素，避免隐藏滚动条带来的其他问题。

快速测试方法 #

在Chrome DevTools的控制台输入：

document.body.style.overflowX = 'hidden'

如果横向滚动消失了，就可以确定是元素溢出导致的，再按上面的方法逐一排查即可。

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