关于CSS在IE6以下浏览器不支持:hover伪类的解决方式

本文链接：https://blog.youkuaiyun.com/C860_zy/article/details/13620815

本文探讨了 IE6 浏览器对 CSS hover 伪类的支持不足问题，并提供了两种解决方案：一是通过 JavaScript 实现 hover 效果；二是利用 IE 的 behavior 属性配合 .htc 文件实现 hover 效果。此外，还讨论了 behavior 属性的应用范围，以及如何通过它解决其他 CSS 伪类的兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在W3Cfuns看到这么一篇文章（http://www.w3cfuns.com/thread-347-1-1.html），自己也亲自去测试了一下，很霸气，特别是IE在CSS的实现方式上其实还是下了功夫，只是没有走对路线而已，o(∩∩)o...哈哈。。。

IE6对hover伪类只是部分支持，但是在我看来，一些常用的标签貌似都不能够支持hover。那么，其实对于IE6以下的浏览器来说，hover的实现最好不要通过CSS进行控制。那么，如果不用CSS控制，我们应该怎么做呢？既然IE6已经很蛋疼了，我们也不妨继续让它蛋疼下去——使用JS去实现伪类效果。

之前翻看一些网站的源码，有相当一部分的网站是用JS去弥补IE6在CSS上的缺陷的。例如hover，以下是JS的解决方案：

<style type=”text/css”>  
      p:hover,p.hover { background:#eee; }   /* 就是要多写一个.hover而已 */
</style> 
 
下面这段代码要放到页面的底部在</body> 前：
<script type=”text/javascript”>   
//<!–  让所有标记支持hover   
function $(){   
      if(document.all){ // 判断是否IE浏览器   
           var obj=document.all;   
            for(var i=0;i<obj.length;i++){   
                  obj[i].onmouseover=function(){   
                        this.className=”hover”   
                  } ;   
                  obj[i].onmouseout=function(){   
                        this.className=”"   
                  }   
            }   
      }   
}   
 $();   
//–>   
</script>

但是其实微软对IE期望还是很高的。于是乎他们用一种较为“繁琐”的方式解决了IE6的hover问题： behavior属性

w3school对behavior属性有详细的讲解：http://www.w3school.com.cn/css/css_dont.asp

其实本质上，IE的hover解决方案仍然是通过JS控制，但是因为把它独立出了一个脚本文件，所有貌似能够显得更加简洁。（但事实上和上面JS的方法差不多）

但是behavior也不是一无是处的。我们不能局限于hover的实现，而是要着眼这个behavior到底还能做什么。

观察一下可以发现behavior的脚本文件（一般是.htc后缀）里面，对于元素的事件监听是用一下标签做到的：

<attach for="element" event="event" handler="function" />

也就是说，我们还可以监听除了onmouseover和onmouseout以外的事件。由此，我们可以很轻松地解决IE6及以下浏览器对于CSS属性的一些诸如focus等的伪类的不支持问题，甚至还能超出现有CSS所做不到的功能——因为它的本质是JS的实现，所以就不存在局限性。（当然JS在老版本的IE里面还是有一定的功能限制的）

好了，今天主要是看到了behavior属性略微有点激动，但是其实也不是什么发现新大陆。写这篇东西也只是做一下记录。前端学习之路是漫长的，只能靠不停的积累。希望与各大前端朋友共勉。