Aug
25
开发过程中将demo中的内容拆分进各子模块，发现之前好好的 hover 效果失效了，我排查的结果是因为在模块中没有定义doctype，页面默认使用 quirks mode，会导致非链接<a>标签的 hover 伪类在 IE7/8 和 firefox 均失去效果。
我们通常认为的非 IE6 以下浏览器都支持链接以外元素的 hover 伪类，其实还需要依赖 doctype，比如这样的代码就在 IE7/8 和 firefox 失去效果：
<html>
<head>
<style>
.hover-test:hover{color:#f00;}
</style>
</head>
<body>
<a class="hover-test" href="#">hover字体变红</a>
<p class="hover-test">hover字体变红,Quirks mode下失效</p>
</body>
</html>
从MSDN找到相关说法：
Internet Explorer 7 and later, in standards-compliant mode (strict
!DOCTYPE), can apply the :hover pseudo-class to any element, not merely
links.
而 Firefox 与 IE 也有区别，Firefox 下用标签名作为选择器可以使 hover 伪类恢复效用：
<html>
<head>
<style>
p.hover-test:hover{color:#f00;}
</style>
</head>
<body>
<a class="hover-test" href="#">hover字体变红</a>
<p class="hover-test">hover字体变红</p>
</body>
</html>
