IEデベロッパーツールを開くと、CSSが予期せず変更される

Question

現在、IE8（仮想マシン上で実行中）のサイトをテスト中です。

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

@media (min-width: 980px) { 

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

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

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

誰も同じような経験がありますか？ あなたはどんなアイデアや探索の方向性を持っていますか？

---

編集： 私は最終的にコンテンツを追加し、この問題を解決することができました：擬似要素の後に（私はすでに、このルールを適用し、ではなく、メディアクエリー内や、何らかの理由でました、それは痛みのポイントのカップル）IEに適用されていない場合には

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

だった、私はそれは私が開発ツールを開いたときにレイアウトが変更された理由を知ることは興味深いことです信じて...

Answer 1

IEはそのように識別することが可能で、それには、以下のチェックをする価値がある：開発者ツールが表示されるまで

1. どれconsole.log()文が何をレンダリングしないようにIEを強制します。
2. IE Devツールを開くと、既定では使用していた既定のビューとは異なる互換モードになります。