如何在瀏覽器處於兼容模式時使僞元素工作？

.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處於兼容模式時，前後都不工作。有相同的解決方案嗎？如何在瀏覽器處於兼容模式時使僞元素工作？

來源

2013-03-30 rohit singh

我以爲兼容模式嘗試，就好像他們是在舊版本的渲染來顯示網頁。從這個http://css-tricks.com/browser-support-pseudo-elements/它說僞元素不支持ie7。 – btevfik

有沒有解決相同的問題？ –

還有一個類似的問題，我發現http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7 – btevfik

您可以使用Modernizr JavaScript庫來檢測不支持:before和:after（例如IE的早期版本）的瀏覽器，然後使用JavaScript來模擬這些選擇器。要僅下載所需庫的一部分，可以轉至this link（已選中相應的複選框）。然後，您可以添加兩個額外的類你的CSS模仿風格的.divClassGreen:before和.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-30 17:13:19 Fluoxetine

如何在瀏覽器處於兼容模式時使僞元素工作？

回答

相關問題