Frage

Ich bin der Gestaltung / Aufbau einer Website, und wie ein guter wenig Entwickler Ich habe ein Auge wurde zu halten, wie die Dinge machen in allen gängigen Browsern - die aktuellen Versionen von Firefox, Chrome, Safari (für Windows) und Chrome und Internet Explorer (8, nicht die 9 Vorschau).

Wie auch immer, sah alles absolut in Ordnung in Chrome zu mir, aber ein Freund von mir, der mir ein Feedback wurde zu geben hat mir gesagt: „Oh, btw, Ihre Website schrecklich in Chrome macht.“ Ich gab ihm den Standard „funktioniert auf meinem Rechner“ Antwort, und er antwortete, dass er dachte, es muss eine Erweiterung Problem sein.

Er gab mir eine kurze Liste der beliebtesten Erweiterungen verwendet er, und nach ein bisschen von Versuch und Irrtum entdeckte ich das Problem liegt mit AdBlock. Ich werde Sie nicht langweilen zu viel mit den Details des tatsächlichen Rendering Problems, aber wir bemerkte etwas seltsam. Es war nicht so AdBlock etwas auf der Seite blockiert wurde, sondern dass die bloße Anwesenheit von AdBlock in Chrome wurde das Problem verursacht. Ich weiß das, weil das Problem weiterhin besteht, auch wenn a) ich AdBlock Pause, und b) wenn ich speziell die Seite / site ausschließen zu sein AdBlocked.

Ich habe das Problem, da feste (Ich hatte es früher in Firefox 3.0 „BrowserShot“ bemerkt, aber den Fehler innerhalb FireBug nur fixiert - ich hatte noch nicht angewendet es auf die reale Kopie), aber es hat mich verlassen wenn es fragen andere Fragen sind sollte ich bewusst sein.

Es scheint nicht eine Frage der Quirks vs. Standards-Modus entweder zu sein. document.compatMode noch zeigt „CSS1Compat“ (Standards-Modus), und wenn ich die Doctype Definition Trigger Quirks-Modus entfernen, macht die Website immer noch richtig (wenn auch mit einem gewissen Polsterung an Orten geändert - nichts zu befürchten)

.

Hat jemand dieses Problem bemerkt vor? Does AdBlock grundsätzlich die Art und Weise Chrome macht Seiten ändern, auch wenn es auf, dass bestimmte Website nicht aktiv ist?


Bearbeiten # 1:

Es wird weirder. Ich habe versucht, ein Beispiel zu schaffen, aber es wäre nicht falsch aus irgendeinem Grunde zu machen. Letztendlich kopiert, ich das Original (das heißt nicht an) html in eine neue Datei, und wirft die gesamte CSS-Datei in einen <style>-Tag in der <head> des Dokuments. Es noch gearbeitet.

Ein bisschen von Versuch und Irrtum, und ich habe festgestellt, dass das Problem besteht nur, wenn CSS über <link rel="stylesheet"> einschließlich, aber nicht über <style>.

Könnte jemand Sie erklären, was hier los ist?


Bearbeiten # 2:

Hier ist der Code, ich arbeite mit:

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

Wenn Sie sich diese ausprobieren möchte, habe ich einige Dateien auf meinem Server setzen:

War es hilfreich?

Lösung

Es scheint ein Problem in der Art und Weise Chrome Rückfluesse Inhalt nach css zu sein wird geändert - Sie genau die gleiche Rendering indem Sie die folgenden Schritte reproduzieren können:

  1. Deaktivieren Adthwart, Reload-Chrom.
  2. Laden Sie die Seite (jede der beiden).
  3. Gehen Sie im Chrome-Inspektor -. Wählen Sie das div # innere Element
  4. Deaktivieren, dann reaktivieren, das float: right; CSS-Attribut.

Es wäre eine gute Idee, einen Fehlerbericht einreichen, wenn es nicht bereits vorhanden -. Es ist entweder ein WebKit oder ein Chrome Bug

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top