我正在设计/构建一个网站，就像一个优秀的小开发人员一样，我一直在关注所有流行浏览器中的渲染方式 - 当前版本的 Firefox、Chrome、Safari(适用于 Windows)和 Chrome和 Internet Explorer(8，不是 9 预览版)。
无论如何，在我看来，Chrome 中的一切都非常好，但我的一位 friend 一直在给我一些反馈，他告诉我“哦，顺便说一句，你的网站在 Chrome 中渲染得非常糟糕。”我给了他标准的“在我的机器上可以运行”的回复，他回答说他认为这一定是扩展问题。
他给了我一个他使用的流行扩展的简短列表，经过一番尝试和错误后，我发现问题出在 AdBlock 上。我不会过多地介绍实际渲染问题的细节，但我们注意到了一些奇怪的事情。并不是 AdBlock 阻止了页面上的某些内容，而是 Chrome 中 AdBlock 的存在本身就导致了问题。我知道这一点，因为即使 a) 我暂停 AdBlock，b) 当我明确排除该页面/网站被 AdBlocked 时，问题仍然存在。
我已经解决了这个问题(我早些时候在 Firefox 3.0“BrowserShot”中注意到了它，但只修复了 FireBug 中的错误 - 我还没有将其应用到真实副本中)，但它已经离开了我想知道是否还有其他我应该注意的问题。
这似乎也不是怪癖与标准模式的问题。 document.compatMode 仍然显示“CSS1Compat”(标准模式)，当我删除 doctype 定义以触发怪异模式时，该网站仍然可以正确呈现(尽管在某些地方更改了一些填充 - 无需担心)。
以前有人注意到这个问题吗？ AdBlock 是否会从根本上改变 Chrome 呈现页面的方式，即使它在该特定网站上未处于事件状态？
<小时/>编辑#1:
事情变得更奇怪了。我尝试创建一个示例，但由于某种原因它无法正确呈现。最终，我将原始(即失败)html复制到一个新文件中，并将整个CSS文件放入 <style> 中。标签 <head>该文件的。它仍然有效。
经过一些试验和错误，我确定该问题仅在通过 <link rel="stylesheet"> 包含 css 时才存在但不是通过 <style> .
有人请解释一下这里发生了什么吗？
<小时/>编辑#2:
这是我正在使用的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="outer">
<img src="placeholder.png" width="150px" height="150px" />
<div id="inner">
<h1>Test</h1>
<p>Lorem ipsum blah blah blah</p>
</div>
</div>
</body>
</html>
CSS:
#outer {
border: 1px solid #000;
width: 700px;
}
#inner {
float: right;
width: 540px;
}
如果您想亲自尝试一下，我已在我的服务器上放置了一些文件:
最佳答案
修改 CSS 后 Chrome 重排内容的方式似乎存在问题 - 您可以按照以下步骤重现完全相同的渲染:
- 禁用 Adthwart，重新加载 chrome。
- 加载页面(两者中的任何一个)。
- 进入 Chrome 检查器 - 选择 div#inner 元素。
- 停用然后重新激活
float: right;CSS 属性。
如果错误报告尚不存在，最好提交错误报告 - 它要么是 WebKit 错误，要么是 Chrome 错误。
关于google-chrome - AdBlock 会改变 Chrome 呈现页面的方式吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4013582/