做前端样式都知道IE6伪类的问题,虽然这个问题到现在也不具有时效性,并且使用IE6的人也渐渐减少,但解决IE6伪类的方法还是值得借鉴。
IE6似乎只对A标签伪类有效,但如今的页面架构以不同以往的简单。div、p、span、li等标签的伪类样式更是经常使用。目前解决IE6伪类的方法只能通过JavaScript去实现,比如hover伪类就相对于JavaScript的移入移出事件。
自己写JavaScript
比如要给DIV一个hover伪类,触发时背景颜色改变为红色。
div { width:300px; height:300px; background:blue;}
div:hover { background:red; }
在所有浏览器下鼠标移入都能变红色,但IE6不div标签的伪类,因此IE6移入没有发生改变。IE6需要JavaScript实现则可以这么写:
// 获取对象
var div = document.getElementsByTagName('div')[0];
// 获取对象默认颜色
var defaultColor=div.style.background;
// 鼠标移出颜色恢复默认值
div.onmouseout = function(){
this.style.background=defaultColor;
this.innerHTML='out<br />移出背景恢复默认蓝色';
}
// 鼠标移入颜色变红色
div.onmouseover = function(){
this.style.background='red';
this.innerHTML='over<br />移入背景颜色变红';
}
IE6下即可实现DIV伪类效果
利用人家写好的JavaScript插件
利用人家写的JavaScript插件也能轻松实现,并且兼容性更好。如 ie6hover.htc
这个ie6hover.htc使用简单,只需要下载这个JavaScript插件,并且在BODY中声明样式
/* 解决IE6 hover伪类 */
body{ _behavior:url(js/ie6hover.htc)}
/* IE6下也生效了 */
div:hover {background:red;}
这样在定义A标签以外的标签伪类时候,IE6也也生效了。这个我就不写Demo了,网上一堆地址可以下载,想试试的朋友去下载玩玩吧!
引申
多浏览器的样式调试一直是美工最烦恼的事,而JavaScript兼容性比较好,所以目前众多浏览器兼容百分之八九十都靠JavaScript去实现。目前各大主流浏览器都开始往标准靠拢,希望不久的将来我们写样式的时候不会蹦出:XX浏览器下怎么样式错乱了~~