Question

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

无论如何，Chrome中的一切看起来都非常好，但是我的一位朋友给了我一些反馈，告诉我“哦，顺便说一下，你的网站在Chrome中呈现的可怕。”我给了他标准的“在我的机器上工作”的回复，他回答说他认为这一定是一个扩展问题。

他给了我一个他使用的流行扩展的简短列表，经过一些试验和错误，我发现问题在于AdBlock。我不会过多地了解实际渲染问题的细节，但我们发现了一些奇怪的东西。并非AdBlock阻止了网页上的某些内容，但仅仅是Chrome中存在AdBlock就会导致问题。我知道这一点，因为即使a）我暂停AdBlock，b）当我明确地将该网页/网站排除在AdBlocked之外时问题仍然存在。

我已经修复了问题（我之前在Firefox 3.0“BrowserShot”中注意到了它，但是只修复了FireBug中的错误 - 我还没有将它应用到真正的副本中），但是它让我失望了想知道是否还有其他问题需要注意。

它似乎也不是Quirks vs. Standards Mode的问题。 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;
    }

如果您想亲自尝试一下，我会在我的服务器上放一些文件：

Answer 1

在修改css后Chrome浏览内容的方式似乎有问题 - 您可以按照以下步骤重现完全相同的呈现：

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

提交错误报告是个好主意，如果它尚不存在 - 它可能是WebKit或Chrome错误。

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

1 个答案: