浅谈伪元素的常见问题

在之前一篇一个IE8的新起点中,我简单列举了一些当前放开枷锁的CSS,其中之一就是伪元素。当然,在使用伪元素的时候依旧会遇到一些问题,我总结了一些,简单陈述,留个印象,那么当再次遇到的时候能够有所回想。

使用伪元素主要遇到的问题集中在IE8,因为IE8只是部分支持伪元素。首先,IE8中设置伪元素的z-index可能无效。这点广为人知,在使用伪元素制作冒泡箭头的时候会遇到,无法通过调节z-index使before置于after之上。

另一个较为常见的问题是,无法以类名触发伪元素content的重绘。如果使用过字体图标那么多半遇到过这个问题。因为大部分字体图标是通过伪元素content插入字符而成,比如在一个当前激活的导航里项上添加.active时,看到图标依旧保持着原来的颜色。其实这个不只是IE8会遇到,移动版Safari同样存在这个问题(偶发),明明更新了类名,外观却不发生重绘。

另外,使用:hover:after以及:hover:before之前必须申明:hover状态也算是一个IE8中的使用事项。

IE8后续的一些版本同样存在一些关于伪元素的bug,比如,rem单位无法作用于伪元素的行高。这个影响不算很大,最多看到一些行距错位,百思不得其解最后发现原来是rem和伪元素搞的鬼:)

当然Firefox也无法幸免,即使是最新版本的Firefox中,伪元素:before绝对定位出现在浮动的子元素之后,这个行为有点不太符合预期。因为尚且无法找到对应的标准描述,我只是觉得IE和Chrome的做法更符合我的预期罢了。

另外一提,chrome的早期版本(<25),伪元素不支持动画过渡。当然这个点已经是一个过去式了。最后,filter滤镜无效

都是凭借记忆写的个人谈,可能存在些微纰漏不要怪我:)

随着新版本浏览器不断的更新,相信伪元素的问题终有一天可以到忽略不计的程度。而且即便是现在,我们也是很欢乐地在使用着。毕竟,不是人人像我这么倒霉碰上这么多杂七杂八的问题嘛~