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补救缺失的事件。
参考：
- No, Internet Explorer did not handle it properly – :hover
- CSS contents and browser compatibility
- Make a whole div clickable with working :active css rule in IE10
- <a> with an inner <span> not triggering :active state in IE 8
比特客栈转型成技术博客了？