最近在整理博客的「关于我 & 合作」页面时，发现页面底部突然出现了横向滚动条。
刚开始我以为是 CSS 出了问题，结果最终发现真正的原因竟然是 Gutenberg 区块的「全幅（Full Width）」设置。
这篇文章记录一下完整的排查过程，希望以后自己再次遇到类似问题时能够快速定位。
问题现象
页面：
https://www.shuijingwanwq.com/about-me-contact/
PC 浏览器底部出现横向滚动条。
页面内容本身并没有特别宽的图片，也没有表格，因此第一反应有些奇怪。
第一步：定位是谁撑宽了页面
首先打开浏览器开发者工具（F12）。
Console 执行：
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
.map(el => ({
tag: el.tagName,
class: el.className,
id: el.id,
width: el.scrollWidth
}))
输出结果类似：
HTML
BODY
wp-site-blocks
MAIN
entry-content alignfull
这里最重要的一行：
entry-content alignfull
说明真正超宽的是整个正文区域，而不是某一张图片或者某一个 div。
第二步：怀疑 CSS
最开始我怀疑：
- 图片超宽
- iframe
- table
- pre
- 某个插件输出了固定宽度
甚至一度准备直接写：
body{
overflow-x:hidden;
}
但是这只是把问题隐藏起来，并没有真正解决。
因此没有继续往 CSS 修改。
第三步：检查页面编辑器
既然问题发生在：
entry-content alignfull
那么说明问题很可能来自 Gutenberg。
打开页面编辑器。
查看最外层 Group（组）。
发现：
对齐：
全幅（Full Width）
于是尝试修改为：
宽幅（Wide Width）
保存。
刷新页面。
横向滚动条立即消失。
最终原因
真正的问题并不是 CSS。
而是：
Group
Alignment
Full Width
修改为：
Wide Width
之后恢复正常。
说明当前主题（Twenty Twenty-Five）与我网站目前的布局，在某些页面下，对 Full Width 的计算存在兼容性问题。
为什么控制台能够定位出来？
因为执行的 JS 会找出：
scrollWidth > viewport
也就是：
哪些元素实际宽度已经超过了浏览器宽度。
如果输出：
img
说明图片超宽。
如果输出：
table
说明表格超宽。
如果输出：
pre
说明代码块超宽。
而这次输出的是：
entry-content alignfull
因此很快就锁定到了整个正文容器。
我总结的一套排查流程
以后再遇到 WordPress 页面出现横向滚动条，我准备统一按下面这个顺序排查。
第一步
Console：
[...document.querySelectorAll('*')]
.filter(el => el.scrollWidth > document.documentElement.clientWidth)
找出真正超宽的元素。
第二步
如果是：
img
table
iframe
pre
直接检查对应内容。
第三步
如果是：
entry-content
wp-block-group
alignfull
优先检查：
Group
Columns
Cover
Gallery
是否设置为了：
Full Width
如果没有必要，改成：
Wide Width
再重新测试。
第四步
最后才考虑修改 CSS。
不要一开始就：
overflow-x:hidden;
否则只是掩盖问题，而没有真正修复。
本次经验
这次最大的收获不是解决了横向滚动条。
而是形成了一套以后可以重复使用的排查流程：
先利用浏览器开发者工具定位超宽元素，再回到 WordPress 区块编辑器检查对应区块，最后才考虑 CSS 修复。
相比直接修改样式，这种方法定位更快，也更容易找到真正的问题所在。
技术博客运营与商业化咨询服务
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、性能优化、多语言运营、Google SEO 以及广告变现等方向。所有经验均来自真实网站运营过程中的持续实践与验证。如果你正在运营个人博客、技术网站或独立开发者项目，希望获得更多自然流量并探索网站商业化路径，欢迎联系我交流。
适合以下用户：
✅ 技术博客运营者
✅ 独立开发者与个人站长
✅ SaaS 产品官网运营团队
✅ 希望拓展海外流量的网站运营者
✅ 希望通过网站获得收入的内容创作者
服务内容：
✅ WordPress 性能优化
✅ SEO 优化咨询
✅ 多语言网站建设
✅ 广告收益优化
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：博客运营咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com
发表回复