3

私はサイトを設計/構築しており、良い小さな開発者のように、すべての一般的なブラウザー (Firefox、Chrome、Safari (Windows 用)、Chrome、およびインターネットの現在のバージョン) で物事がどのようにレンダリングされるかを監視してきました。エクスプローラー (9 プレビューではなく 8)。

とにかく、私には Chrome ですべてがまったく問題ないように見えましたが、フィードバックをくれた私の友人は、「ところで、あなたのサイトは Chrome でひどくレンダリングされます」と言いました。私は彼に標準的な「私のマシンで動作します」という応答を返しました.

彼は、彼が使用している人気のある拡張機能の短いリストを私にくれました。少し試行錯誤した後、問題は AdBlock にあることがわかりました。実際のレンダリングの問題の詳細についてはあまり説明しませんが、奇妙なことに気付きました。AdBlock がページ上の何かをブロックしているわけではなく、Chrome に AdBlock が存在するだけで問題が発生していた. これは、a) AdBlock を一時停止し、b) そのページ/サイトを AdBlock から除外しても問題が解決しないためです。

その後、問題を修正しました (以前に Firefox 3.0 の "BrowserShot" で気付いていましたが、FireBug 内のバグのみを修正しました - まだ実際のコピーには適用していませんでした)。私が知っておくべき他の問題があります。

Quirks vs. Standards Mode の問題でもないようです。document.compatMode には引き続き "CSS1Compat" (標準モード) が表示され、doctype 定義を削除して quirks モードをトリガーしても、サイトは正しくレンダリングされます (場所によってはパディングが変更されていますが、心配する必要はありません)。

以前にこの問題に気づいた人はいますか? AdBlock は、特定のサイトでアクティブになっていない場合でも、Chrome がページをレンダリングする方法を根本的に変更しますか?

編集＃1：

それは奇妙になります。例を作成しようとしましたが、何らかの理由で正しくレンダリングされません。最終的に、元の (失敗した) html を新しいファイルにコピーし、CSS ファイル全体をドキュメントの<style>タグに挿入しました<head>。それでもうまくいきました。

少し試行錯誤した結果、問題は css via を含め、 via を含めない場合にのみ存在すると判断しまし<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;
    }

これを自分で試してみたい場合は、サーバーにいくつかのファイルを置きました。

4

1 に答える 1

0

css が変更された後に Chrome がコンテンツをリフローする方法に問題があるようです。次の手順に従って、まったく同じレンダリングを再現できます。

  1. Adthwart を無効にし、Chrome をリロードします。
  2. ページを読み込みます (2 つのいずれか)。
  3. Chrome インスペクタに移動します - div#inner 要素を選択します。
  4. float: right;CSS 属性を無効にしてから再度有効にします。

まだ存在しない場合は、バグ レポートを提出することをお勧めします。それは WebKit または Chrome のバグです。

于 2010-10-25T12:44:52.243 に答える