排查网站自动添加height:auto!important行内样式的方法

这种渲染后自动给div加固定行内样式的情况，我之前也碰到过几次，大概率是这几个方向的问题，给你一步步排查的思路：

1. 先排除浏览器扩展的锅 #

很多广告拦截、页面优化类的扩展会偷偷注入样式或者修改DOM，这是最常见的原因。

• 打开Chrome的无痕模式（Ctrl+Shift+N），访问你的页面，检查那些div的样式是否还存在。
• 如果无痕模式下样式消失了，就回到正常浏览器窗口，逐个禁用已安装的扩展，每次禁用后刷新页面，直到找到那个搞事情的扩展。

2. 排查WordPress主题/插件的动态代码 #

从你的页面来看是WordPress站点，主题或第三方插件的JS脚本很可能在DOM加载后修改了样式：

• 后台先禁用所有插件，刷新前台页面看样式是否消失。如果消失了，再逐个启用插件，每次启用后刷新，定位到触发问题的插件。
• 如果禁用插件后问题还在，切换到WordPress官方默认主题（比如Twenty Twenty-Four），再检查页面，确认是不是主题的JS代码导致的。

3. 用DevTools深入追踪脚本 #

如果上面两步没找到问题，就得用DevTools挖得更深一点：

• 打开DevTools的Sources面板，按Ctrl+Shift+F打开全局搜索框，搜索height: auto !important，看看有没有匹配的脚本代码。找到后点击进去，设置断点调试，看代码是在什么时机执行的。
• 如果搜不到具体字符串，就搜setAttribute('style'或者element.style.height这类修改样式的关键词，同样设置断点跟踪调用栈，找到触发修改的源头。

4. 检测是否有MutationObserver在搞鬼 #

还有一种可能是脚本用了MutationObserver监听DOM变化，自动添加样式。你可以在DevTools的Console里输入这段代码，刷新页面后看控制台输出：

// 临时记录所有创建的MutationObserver实例
const originalObserver = window.MutationObserver;
window.MutationObserver = class extends originalObserver {
  constructor(callback) {
    console.log('MutationObserver created:', callback);
    super(callback);
  }
};

如果有输出，就能看到是哪个脚本创建了观察者，顺着这个线索就能找到问题所在。

按这个步骤排查，应该能很快定位到自动添加样式的根源。

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