IE与:active的小故事

IE4发明了a元素(链接)上的:hover与:active(pseudo-class,伪类),它成为了CSS1的标准。

CSS2把这个标准扩展至所有元素,IE是最晚支持它的浏览器,直到IE8才加入。

本来这个故事已经完结,然而IE却不想让故事画上句号——

今天在开发时遇到一个奇怪的问题:CSS按钮,在鼠标按下时本该有“:active”的属性,然而IE9却不卖帐,按中间总是没反应(:active属性不触发),按边缘却可以。

同样的问题,我尝试在Twitter Bootstrap等网站重现,却怎么都不成功。

研究了半天CSS和Javascript源码,依旧毫无进展。

直到我对比自己的HTML和Bootstrap演示的HTML,才明白过来——

我的设计比Bootstrap多一个span元素在链接里。

这时再查对应测试,果然IE8,IE9以及IE10,都是不支持从子元素触发:active的(不向上传播)这个问题亦存在于Opera,但只有在子元素为display:block时才触发

解决办法?

  • 避免在CSS按钮下增加占用大面积的元素(Twitter Bootstrap的icon很小,所以问题不明显);
  • 用“类”代替“伪类”,再用Javascript补救缺失的事件。

参考:

Author: 店长

The Master of BitInn

One thought on “IE与:active的小故事”

Comments are closed.