Question

 .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处于兼容模式时，之前和之后都无法正常工作。有没有相同的解决方案？

Answer 1

您可以使用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); } } ：

{{1}}

如何在浏览器处于兼容模式时使伪元素工作？

1 个答案: