IE8 伪元素渲染失败

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style>
*{
    list-style:none;
    margin:0;
    padding:0;
}

#outer{
    width:200px;
    background:grey;
}
#outer.asd{
    background:black;
}
#outer:before{
    content:"";
    zoom:1;
    display:block;
    width:100px;
    height:100px;
    background:blue;
}
#outer.asd:before{
    content:"";
    zoom:1;
    display:block;
    width:100px;
    height:100px;
    background:red;
}
</style>
</head>
<body>
<div id="outer" class="">
</div>
</body>
<script>
    var o=document.getElementById("outer");
    o.onclick=function(){
        if(o.className=="")
            o.className="asd";
        else
            o.className="";
    }
</script>
</html>

在chrome下点击后渲染正常，但在IE8下点击后父元素添加类并没有渲染到before上。

还有个问题就是:before如果父元素使用伪类如:hover来修改:before样式则会渲染延迟。

如何解决上述问题，尽可能不使用js，发现问题原因是使用了:before和:after实现IE8下圆角，上述问题就导致了在给父元素添加clicked类名或者:hover时圆角图标没有变化的bug。

【热门文章】