AdBlock会改变Chrome的页面渲染吗？

Question

我正在设计/构建一个网站，像一个好的开发人员一样，我一直在关注所有流行浏览器（Firefox、Chrome、Safari（Windows 版本）和 Internet Explorer（8，而不是 9 预览版））中的呈现效果。

总之，在 Chrome 中，一切看起来都很好，但我的一个朋友告诉我：“哦，顺便说一下，你的网站在 Chrome 中渲染得非常糟糕。”我给了他标准的“在我的机器上可以正常工作”的回答，他回复说他认为这必须是一个扩展问题。

他给了我一个他使用的流行扩展的简短列表，经过一些试验和错误，我发现问题出在 AdBlock 上。我不会过多地介绍实际渲染问题的细节，但我们注意到了一些奇怪的事情。不是 AdBlock 在页面上阻止了某些东西，而是 AdBlock 在 Chrome 中的存在引起了问题。我知道这是因为问题仍然存在，即使 a）我暂停 AdBlock，b）当我明确排除该页面/站点被 AdBlock 阻止时。

我已经解决了这个问题（我早在 Firefox 3.0 的“BrowserShot”中就注意到了它，但只在 FireBug 中修复了错误——我还没有将其应用于实际的副本），但这让我想知道是否还有其他问题需要注意。

这似乎不是 Quirks vs. Standards Mode 的问题。document.compatMode 仍然显示“CSS1Compat”（标准模式），当我删除 doctype 定义以触发 quirks 模式时，网站仍然正确呈现（尽管某些填充在某些地方发生了变化——无需担心）。

有人之前注意到过这个问题吗？即使它没有在特定站点上激活，AdBlock 是否从根本上改变了 Chrome 渲染页面的方式？

编辑 #1:

更奇怪的是，我试图创建一个示例，但由于某种原因它不会错误地呈现。最终，我将原始（即失败的）html 复制到一个新文件中，并将整个 CSS 文件放入文档的 中的

- AgentConundrum

Answer 1

Chrome在修改CSS后重新排列内容的方式似乎存在问题 - 您可以通过以下步骤重现完全相同的渲染：

1. 禁用Adthwart，重新加载Chrome。
2. 加载页面（任何两个）。
3. 进入Chrome检查器 - 选择div#inner元素。
4. 停用，然后重新启用float: right; CSS属性。

如果尚不存在bug报告，则建议提交bug报告 - 这是WebKit或Chrome的错误。

- Jean Hominal

---

该死。我刚刚完成了一份关于adblockforchrome的报告。我想我得再提交一份。你有任何想法吗？a）为什么只有在安装adblock时才会发生这种情况，b）为什么只有<link>而不是<style>？ - AgentConundrum

看起来这是 WebKit，而不仅仅是 Chrome。我在 Safari 上使用了 Firebug Lite 书签，并能够重现这个问题。 - AgentConundrum

这是我的猜测：b) 使用<link>，CSS属性必须在HTTP请求后加载，而使用<style>，这些CSS属性立即可用于WebKit；a) Adblock通过添加CSS样式来运行 - 我猜在Adblock/<link>的情况下，Adblock CSS首先被加载，<link> CSS第二个被加载，这会触发错误。（在另外3种情况中，<link>或<style> CSS在任何其他CSS之前加载。）欢迎在提交错误报告时添加链接。 - Jean Hominal