4

私はこれを理解しようとして苦労しています。article2 つの要素が挿入されて:beforeおり、:afterその両方がその記事内に完全に配置されています。

IE8 を除くすべてのブラウザーで、z-index スタッキングは完全に機能しています。下から上に次の順序で移動する必要があります。

記事コンテンツ > フェードアウト画像 > アイコン

私はすでにいくつかの異なることを試しましたが、最新のものはここで見ることができます: http://jsfiddle.net/LtYMV/2/

私が試していることの基本的な概要は次のようになります。

article {
    // styles
}

article:before {
    // icon background image used on inserted content
}

article:after {
    // background image used on inserted content
}​

これにはある種のトリックがあることを知っていますが、z-index 値の組み合わせではそれを理解できないようです。助けてください！

4

1 に答える 1

4

疑似要素と z-index に関しては、IE8 は奇妙です。子要素が親の z-index を (上書きできずに) 継承するバグがあります。quirksmode で IE8 と z-index の詳細を読むことができます。

標準に準拠したブラウザであなたの例と同じように動作し、IE8で問題なく動作するようにフィドルを少し変更しましたが、IEでフェードすることはありません: http://jsfiddle.net/LtYMV/8/ 、下にアイコンがありますテキスト。

アイコンに別の要素を使用するバージョンも作成しました（各「.post」要素の直後に「アイコン」クラスを使用）。IE8 のフェードはまだありませんが、アイコンはテキストの上にあります: http://jsfiddle.net/LtYMV/7/、以前のものからわずかに改善されています。

お役に立てれば！

于 2012-10-09T16:39:45.987 に答える