IE中伪类:hover的使用及BUG（2）

作者：blank 来源：蓝色经典时间：2007-05-11 17:04:00　

可我们发现上例中的效果，在IE6中依然无法显示，难道我们的代码写错了，可检查来检查去一点错误也没有（不信你找个高高手问问，他们依然会回答你，这代码完全正确），难道是标准中的说明是错的？还是IE6浏览器连CSS1也不支持？很多疑问从四面八方跑来了……

那到底是什么问题呢？

不是标准说明的错，也不是IE浏览器不支持CSS1，而是IE浏览器自身解析的问题，是IE5.5和IE6中伪类:hover的BUG。

那又该如何解决这个问题呢？

这个BUG可以通过在链接的属性中增加某些特殊的CSS属性声明来消除。

下面我们对上面的第二个例子进行实验，究竟哪些属性可以帮我们来消除这些BUG。

对CSS代码我们增加：

li a:hover {}

对其属性我们仅设定width:100px;发现在IE6中依旧没有变化，我们尝试着更改width的value，比如使其width:99px，奇怪的事情发生了，在IE6中，隐藏的部分在触发的时候显示出来了。我们再对li a:hover的属性仅设定color来测试（初始值为#fff），更改color值，发现在IE6下却也不能触发显示，奇怪，奇怪，真奇怪……是不是依旧是一头雾水……没关系，继续往下实验，或许归类了我们就能发现规律了！

我们再用其他属性进行设置：width，positon，background，text-decoration，font-size，font-weight，font-family，border，float，display，font-style，margin，padding，text-align，overflow，text-transform，text-indent，z-index，vertical-align。

我们发现除了text-decoration，color，z-index不能触发显示（对于不能触发显示的部分，可以还有某些遗漏的属性，欢迎朋友补充）外，其他属性均可以做为消除伪类:hover BUG的特定属性。

说明：

对于dispaly不可以用本例来测试，可另外写个更简单的例子（去除ul/li，a和span中的position）。在实际应用中怿飞不建议改变display值来做为特定属性消除此BUG，而且在某些例子中此属性不一定能消除BUG。
对于做为特定属性的border和background中的颜色我们还可用全写和简写来改变，如#fff和#ffffff在消除BUG中解析为2个不同的值。

最终效果：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>IE中伪类:hover的使用及BUG</title><style>* {margin:0; padding:0;} ul {list-style:none;margin:100px;}li {height:100px; width:100px; background:#000; font-size:12px; } li a {display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;} li a:hover {background:#ccc;}li span {display:none; } li a:hover span {display:block; width:100px; height:100px; background:#c00; position:absolute; top:50px; left:50px; color:#fff; }</style></head><body><ul> <li><a href="#" title="">鼠标移过来触发我吧！<span>哈哈，终于被你发现</span></a></li> </ul></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

第一页上一页 1

标签：IE,hover,CSS

投稿

IE中伪类:hover的使用及BUG（2）

猜你喜欢

pandas分区间,算频率的实例

When we`re only No.2, we try harder之淘宝节日LOGO互动设计小探讨

在Mac OS上使用mod_wsgi连接Python与Apache服务器

js实现一个日期联动下拉菜单

MySQL数据库中使用GRANT语句增添新用户

python实现画桃心表白

Github Copilot结合python的使用方法详解

Golang学习之平滑重启

JavaScript实现简易放大镜最全代码解析(ES5)

python对一个数向上取整的实例方法

django执行原生SQL查询的实现

PHP getDocNamespaces()函数讲解

python实现定时提取实时日志程序

MySQL设置global变量和session变量的两种方法详解

python实现感知器算法详解

keras 模型参数,模型保存,中间结果输出操作

Sqlserver 高并发和大数据存储方案

简述Python中的进程、线程、协程

中秋送礼分配不均这款python刮刮卡完美解决问题

区分有单选框的选项和普通的选项