6

現在、IE8（仮想マシンで実行）でサイトをテストしています。

このサイトでは、メディアクエリ内の：before要素と：after要素内でいくつかの背景画像を使用しています。

@media (min-width: 980px) {

    .box:after {
        ...
        background: url('../images/assets/home-create-background.png') bottom right no-repeat;
        ...
    }
}

私はrespond.jsを使用して、IE8でのメディアクエリのサポートを提供しています。メディアクエリ内のルールは、ページが読み込まれるとすぐに適用されます（つまり、respond.jsが実際に機能しています）。ただし、この画像は表示されません。

面白いこと に、IE Developer Toolsを開くと（たとえば、F12キーを押すと）、画像が突然表示されます。

誰かが似たようなことを経験したことがありますか？探求するアイデアや方向性はありますか？

編集： コンテンツを：after疑似要素に追加するこの問題を最終的に修正することができました（私はすでにこのルールを適用していましたが、メディアクエリ内ではなく、何らかの理由でIEに適用されませんでした）

    .box:after {
        ...
        background: url('../images/assets/home-create-background.png') bottom right no-repeat;
        content: " ";
        ...
    }

いずれにせよ、開発ツールを開いたときにレイアウトが変更された理由を知ることは興味深いと思います...

4

1 に答える 1

4

IEのいくつかの問題点を特定できるため、以下を確認する価値があります。

  1. console.log()ステートメントがあると、開発者ツールが表示されるまでIEは何もレンダリングしません。
  2. IE Devツールを開くと、デフォルトでは、使い慣れたデフォルトのビューとは異なる互換モードになっています。
于 2013-03-18T13:33:52.077 に答える