IE6除a标签外其它标签伪类解决!

做前端样式都知道IE6伪类的问题,虽然这个问题到现在也不具有时效性,并且使用IE6的人也渐渐减少,但解决IE6伪类的方法还是值得借鉴。

IE6似乎只对A标签伪类有效,但如今的页面架构以不同以往的简单。div、p、span、li等标签的伪类样式更是经常使用。目前解决IE6伪类的方法只能通过JavaScript去实现,比如hover伪类就相对于JavaScript的移入移出事件。

【国内直连ChatGPT 29元起】
国内直连ChatGPT,Plus会员每月29元起,支持最新o1模型探索更多领域,无需注册OpenAI账号。

自己写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伪类效果

full

full

利用人家写好的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浏览器下怎么样式错乱了~~

分享

TITLE: IE6除a标签外其它标签伪类解决!

LINK: https://www.qttc.net/226-ie6-other-tag-hover.html

NOTE: 原创内容,转载请注明出自琼台博客