Est-ce que AdBlock changer la façon dont Chrome rend les pages?

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

Question

Je suis la conception / construction d'un site, et comme un bon petit développeur, je l'ai gardé un oeil sur la façon dont les choses rendent dans tous les navigateurs populaires - les versions actuelles de Firefox, Chrome, Safari (pour Windows) et Chrome et Internet Explorer (8, pas le 9 aperçu).

Quoi qu'il en soit, tout avait l'air tout à fait bien dans Chrome pour moi, mais un de mes amis qui a été de me donner des commentaires m'a dit « oh, d'ailleurs, votre site rend horriblement dans Chrome. » Je lui ai donné la norme « fonctionne sur ma machine » réponse, et il a répondu qu'il pensait que ce doit être un problème d'extension.

Il m'a donné une courte liste des extensions populaires qu'il utilise, et après un peu d'essais et d'erreurs, j'ai découvert le problème réside AdBlock. Je ne vais pas vous ennuyer trop avec les détails du problème de rendu réel, mais nous avons remarqué quelque chose de bizarre. Ce ne fut pas que AdBlock bloquait quelque chose sur la page, mais que la simple présence d'AdBlock dans Chrome a été à l'origine du problème. Je sais que cela parce que le problème persiste même quand a) je fais une pause AdBlock, et b) lorsque j'excluez spécifiquement cette page / site d'être AdBlocked.

J'ai depuis résolu le problème (je l'avais remarqué plus tôt dans un Firefox 3.0 « BrowserShot », mais le bug fixe à l'intérieur Firebug seulement - je ne l'avais pas appliqué à la vraie copie encore), mais il m'a laissé se demander s'il y a d'autres questions que je devrais être au courant.

Il ne semble pas être une question de Quirks par rapport aux normes en mode non plus. document.compatMode montre encore « CSS1Compat » (normes Mode), et lorsque je retire la définition de DOCTYPE pour déclencher le mode Quirks, le site rend toujours correctement. (mais avec un peu de rembourrage changé dans les endroits - rien à craindre)

Quelqu'un at-il remarqué ce problème avant? Est-ce que AdBlock changer fondamentalement la façon dont Chrome rend les pages, même si ce n'est pas actif sur ce site spécifique?

Edit # 1:

Il devient plus étrange. J'ai essayé de créer un exemple, mais il ne serait pas rendre mal pour une raison quelconque. En fin de compte, je copiais l'original (c.-à-défaut) html dans un nouveau fichier, et jeté l'intégralité du fichier CSS dans une balise de <style> dans le <head> du document. Il toujours a marché.

Un peu d'essais et d'erreurs, et j'ai déterminé que le problème existe uniquement en incluant via css <link rel="stylesheet"> mais pas via <style>.

Quelqu'un pourrait-il s'il vous plaît expliquer ce qui se passe ici?

Edit # 2:

Voici le code que je travaille avec: 

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;
    }

Si vous souhaitez essayer par vous-même, je l'ai mis des fichiers sur mon serveur:

Était-ce utile?

La solution

Il semble être un problème dans la façon dont Chrome repositionne contenu après css a été modifié - vous pouvez reproduire exactement le même rendu en procédant comme suit:

  1. Désactiver AdThwart, reload chrome.
  2. Chargez la page (l'un des deux).
  3. Allez dans l'inspecteur Chrome -. Sélectionner le div # élément intérieur
  4. Désactiver, puis rallumé, l'attribut CSS float: right;.

Ce serait une bonne idée de déposer un rapport de bogue, si elle n'existe pas déjà -. Il est soit un WebKit ou un bug Chrome

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top