AdBlock 会改变 Chrome 呈现页面的方式吗？

StackOverflow https://stackoverflow.com/questions/4013582

题

我正在设计/构建一个网站，就像一个优秀的小开发人员一样，我一直在关注所有流行浏览器中的呈现方式 - 当前版本的 Firefox、Chrome、Safari（适用于 Windows）和 Chrome 以及 Internet Explorer（8，不是 9 预览版）。

无论如何，镀铬对我来说一切都很好，但是我的一个朋友一直给我一些反馈的朋友告诉我：“哦，顺便说一句，您的网站在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> 该文件的。它 仍然 工作了。

经过一些试验和错误，我确定问题仅在通过包含 css 时才存在 <link rel="stylesheet"> 但 不是 通过 <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 重排内容的方式似乎存在问题 - 您可以按照以下步骤重现完全相同的渲染：

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

如果错误报告尚不存在，那么最好提交错误报告 - 它要么是 WebKit 要么是 Chrome 错误。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top