最近在调整博客归档页侧边栏时，遇到了一个看似简单却排查了很久的问题。
表面上看，是一个移动端横向滚动条问题。
但继续排查后发现，又牵扯出了 Google AdSense 的报错：
Uncaught TagError: adsbygoogle.push() error:
No slot size for availableWidth=0
更有意思的是：
当我解决其中一个问题时，另一个问题又会重新出现。
最终定位到的问题根源，既不是 CSS，也不是 AdSense，而是 Gutenberg 区块结构。
问题背景
归档页右侧侧边栏中放置了一个 AdSense 广告位。
最初的广告代码如下：
<ins class="adsbygoogle"
style="display:block; width:450px; max-width:100%;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="4220340824"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
之所以设置：
width:450px;
是因为之前 AdSense 一直报错：
No slot size for availableWidth=0
添加固定宽度后，报错消失了。
但新的问题出现了。
第一阶段：移动端出现横向滚动条
移动端测试时发现页面右侧可以横向滚动。
最开始怀疑：
- 分类下拉框
- 标签云
- 日历
- 自定义 CSS
甚至怀疑是 Twenty Twenty-Five 主题的问题。
为了定位问题，我在浏览器控制台执行：
const vw = document.documentElement.clientWidth;
[...document.querySelectorAll('*')]
.filter(el => el.getBoundingClientRect().right > vw)
.map(el => ({
tag: el.tagName,
class: el.className,
width: Math.round(el.getBoundingClientRect().width)
}))
最终发现大量元素宽度都变成了：
450px
包括：
- 广告
- 标签云
- 日历
- 侧边栏内容
继续向上排查后发现，罪魁祸首正是广告中的：
width:450px;
第二阶段：解决横向滚动条
于是将广告代码修改为：
<ins class="adsbygoogle"
style="display:block; width:100%; max-width:100%; box-sizing:border-box;"
data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
data-ad-slot="4220340824"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
修改后：
移动端页面恢复正常。
横向滚动条彻底消失。
第三阶段：新的问题出现
然而就在横向滚动条消失后。
控制台再次出现了之前的错误：
Uncaught TagError: adsbygoogle.push() error:
No slot size for availableWidth=0
也就是说：
width:450px
↓
AdSense 正常
↓
移动端异常
width:100%
↓
移动端正常
↓
AdSense 报错
两个问题似乎无法同时解决。
第四阶段：开始怀疑 Gutenberg 区块结构
此时开始检查归档页模板结构。
最初的侧边栏结构如下：
栏目
└── 栏目
└── 堆叠（Stack）
├── 搜索
├── 分类列表
├── 广告（WPCode）
├── 标签云
└── 日历
期间尝试过很多方案：
- 修改 Column 宽度
- 调整侧边栏比例
- 给广告增加 min-width
- 增加 min-height
- 使用 Group 包裹广告
- 使用自定义 HTML 区块
- 延迟执行 adsbygoogle.push()
都没有彻底解决问题。
最终解决方案
后来尝试将：
堆叠（Stack）
直接替换为：
组（Group）
修改后的结构如下：
栏目
└── 栏目
└── 组（Group）
├── 搜索
├── 分类列表
├── 广告（WPCode）
├── 标签云
└── 日历
保存后刷新页面。
问题直接消失。
最终结果
最终同时满足：
1. AdSense 不再报错
控制台恢复正常：
No slot size for availableWidth=0
不再出现。
2. 广告正常显示
无需固定宽度：
width:100%;
max-width:100%;
即可正常加载。
3. 移动端无横向滚动条
页面恢复正常。
4. 侧边栏布局恢复自然
之前日历右侧会紧贴屏幕边缘。
修改后：
- 日历显示正常
- 标签云显示正常
- 整个侧边栏间距恢复正常
原因分析
虽然 WordPress 官方文档并未明确说明两者的差异。
但从实际表现来看：
Stack（堆叠）
在布局计算阶段，内部元素的宽度可能尚未最终确定。
而 AdSense 的：
(adsbygoogle = window.adsbygoogle || []).push({});
执行得更早。
于是出现：
广告初始化
↓
检测可用宽度
↓
availableWidth = 0
↓
抛出异常
而：
Group（组）
则不会出现这个问题。
本次排查总结
整个排查过程实际上经历了：
AdSense 报错
↓
添加 width:450px
↓
报错消失
移动端出现横向滚动条
↓
删除 width:450px
↓
横向滚动条消失
AdSense 再次报错
↓
排查 Gutenberg 结构
↓
Stack → Group
↓
问题彻底解决
这次最大的收获不是修复了一个 Bug，而是再次验证了一条经验：
当页面布局出现异常时，优先定位具体元素与区块结构，不要一开始就怀疑 CSS 或写大量补丁代码。
很多时候，真正的问题可能只是一个区块类型选择错误。
技术博客运营与商业化咨询服务
本站已持续运营超过 10 年，累计发布 1000+ 篇原创技术文章，长期实践 WordPress 网站建设、性能优化、多语言运营、Google SEO 以及广告变现等方向。所有经验均来自真实网站运营过程中的持续实践与验证。如果你正在运营个人博客、技术网站或独立开发者项目，希望获得更多自然流量并探索网站商业化路径，欢迎联系我交流。
适合以下用户：
✅ 技术博客运营者
✅ 独立开发者与个人站长
✅ SaaS 产品官网运营团队
✅ 希望拓展海外流量的网站运营者
✅ 希望通过网站获得收入的内容创作者
服务内容：
✅ WordPress 性能优化
✅ SEO 优化咨询
✅ 多语言网站建设
✅ 广告收益优化
✅ 博客运营与商业化咨询
如需了解方案或交流相关问题，请直接联系我，并注明：博客运营咨询。
联系方式：
Telegram：@shuijingwan
微信：13980074657
邮箱：shuijingwanwq@gmail.com
发表回复