0 
 .divClassGreen{

       border-bottom:4px solid  white;   
       position: relative;
}
.divClassGreen:before{


       border-bottom:5px solid  white;   
       content: '';
        position: relative;
         top: -6px;
        right: -6px;
        bottom: -6px;
        left: -6px;
}  
.divClassGreen:after{


       border-bottom:5px solid  green;  
       content: '';
        position: absolute;
        top: -11px;
        right: -2px;
        bottom: -9px;
        left: -2px; 

}

これは私の css ですが、IE 8 が互換モードの場合、前と後が機能しません。同じ解決策はありますか？

4

1 に答える 1

0

:beforeModernizr JavaScript ライブラリを使用して、サポートされていないブラウザー:after(初期バージョンの IE など) を検出し、JavaScript を使用してそれらのセレクターをエミュレートできます。ライブラリの必要な部分だけをダウンロードするには、このリンクにアクセスしてください(適切なチェックボックスが既に選択されています)。.divClassGreen:before次に、とのスタイルを模倣する 2 つのクラスを CSS に追加できます.divClassGreen:after。

.divClassGreen:before, .divClassGreenBefore {
    /* blah */
}  
.divClassGreen:after, .divClassGreenAfter {
    /* more blah */
}

最後に、JavaScript を使用して、スタイルとを持つ空のdivタグを前後に追加し.divClassGreenます ( があるため空です) 。content: ''.divClassGreenBefore.divClassGreenAfter

//If the browser doesn't support generated content (:before and :after)
if (!Modernizr.generatedcontent) {

    var divClassGreen = document.getElementsByClassName("divClassGreen"); //returns a NodeList

    //Create the equivalents of :before and :after
    var divClassGreenBefore = document.createElement('div');
    var divClassGreenAfter = document.createElement('div');

    //Add the appropriate classes
    divClassGreenBefore.className = 'divClassGreenBefore';
    divClassGreenAfter.className = 'divClassGreenAfter';

    //Iterate through the NodeList, which adds the element before and after each .divClassGreen
    for (i = 0; i < divClassGreen.length; i++) {

        //Adds before
        divClassGreen[i].parentNode.insertBefore(divClassGreenBefore, divClassGreen[i]);

        //There's no insertAfter, so imitate it by using insertBefore on the hypothetical (next) sibling of divClassGreen
        divClassGreen[i].parentNode.insertBefore(divClassGreenAfter, divClassGreen[i].nextSibling);
    } 

}
于 2013-03-30T17:13:19.523 に答える