关于CSS在IE6以下浏览器不支持:hover伪类的解决方式
2013-10-30 08:58
417 查看
今天在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的解决方案:
但是其实微软对IE期望还是很高的。于是乎他们用一种较为“繁琐”的方式解决了IE6的hover问题:behavior属性
w3school对behavior属性有详细的讲解:http://www.w3school.com.cn/css/css_dont.asp
其实本质上,IE的hover解决方案仍然是通过JS控制,但是因为把它独立出了一个脚本文件,所有貌似能够显得更加简洁。(但事实上和上面JS的方法差不多)
但是behavior也不是一无是处的。我们不能局限于hover的实现,而是要着眼这个behavior到底还能做什么。
观察一下可以发现behavior的脚本文件(一般是.htc后缀)里面,对于元素的事件监听是用一下标签做到的:
也就是说,我们还可以监听除了onmouseover和onmouseout以外的事件。由此,我们可以很轻松地解决IE6及以下浏览器对于CSS属性的一些诸如focus等的伪类的不支持问题,甚至还能超出现有CSS所做不到的功能——因为它的本质是JS的实现,所以就不存在局限性。(当然JS在老版本的IE里面还是有一定的功能限制的)
好了,今天主要是看到了behavior属性略微有点激动,但是其实也不是什么发现新大陆。写这篇东西也只是做一下记录。前端学习之路是漫长的,只能靠不停的积累。希望与各大前端朋友共勉。
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属性略微有点激动,但是其实也不是什么发现新大陆。写这篇东西也只是做一下记录。前端学习之路是漫长的,只能靠不停的积累。希望与各大前端朋友共勉。
相关文章推荐
- 解决IE8以下浏览器不支持CSS属性opacity的问题
- 关于li:hover伪类,以及各种除了a:hover在IE6下不生效的解决办法.
- css---hover伪类在ie6下的处理方式
- 关于各浏览器对CSS伪类以既(selector)选择器的支持[转]
- 浏览器对css 伪类 hover的支持
- 关于CSS+DIV 开发 与各浏览器的兼容性问题及解决方法
- 关于IE8 及以下版本不支持Map() 对象的解决办法
- Css在IE6浏览器里的一些弊端和解决方法
- 让 IE6 及其以下版本支持 CSS 中 min/max-width/height 属性
- [转]CSS中设置div最小高度(支持IE6, IE7, IE8, FF等浏览器)
- 一个解决ie6不支持:hover、属性选择器等问题的方法
- csshover.htc 以及简单使用方法(解决IE6下 :hover 在其他标签下无效问题)
- 关于tomcat不支持put方式的解决方式
- 关于ANDRIOD2.3不支持蓝牙HID的解决方式
- CSS在IE6浏览器中的bug及解决办法收集
- 链接伪类(:hover)CSS背景图片有闪动BUG的解决方法
- CSS方式支持IE6的fixed样式
- 通过css代码使边框变圆角(ie9以下浏览器不支持)
- 关于使用struts2跳转后css和js失效的解决方式
- IE6不支持CSS中的min-width/height属性问题的解决方法