6

IE8 では、疑似要素の背景色が親の子の後ろに流れるのはなぜですか? テキストは前面に流れますが、背景色はそうではありません。Z-index は役に立たなかったようです。

これが IE8 のバグかどうかは判断できませんでした。これはかなり一般的な使用例のようですが、それに関連する多くのブログ投稿や SO の質問は見つかりませんでした。

http://jsfiddle.net/VAg2E/

    <div id="parent">
       <img src="http://placehold.it/200x200">
    </div>


    #parent{ padding: 20px; }
    #parent:before{
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
    }

編集:スタック順序に関する関連するスタックオーバーフローの質問

4

3 に答える 3

6

これは間違いなくIE8のバグです。:before疑似要素は配置されているため、新しいスタッキングコンテキストを作成し、ネガティブを指定しない限り、常にその上に描画する必要img z-indexあります(その場合でも、要素全体が背景だけでなく背後に描画される必要があります)。

:beforeこの問題は、と:after疑似要素の間のスタック、およびのような置き換えられた要素にも固有のようimgです。IE8は、置き換えられたコンテンツをスタッキングの観点から異なる方法で処理しているように見えますが、それが何をしていても、仕様に完全に準拠していません。

ご存知かもしれませんが、これはIE9で修正されています。

于 2012-12-14T05:51:15.393 に答える
0

<!DOCTYPE>が宣言され ている場合、IE8 は疑似のみをサポートします。ソース

    #parent { padding: 20px; z-index: 2; }
    #parent:before {
       content: 'Behind the image';
       position: absolute;
       top: 0;
       left: 0;   
       width: 100px;
       height: 100px;
       background-color: red;
       z-index: -1;
    }​
于 2012-12-13T19:49:58.000 に答える