以文本方式查看主题 - ╋艺 镇╋ (http://wdystv.com/bbs/index.asp) -- ┣◇网站建设&Web语言 (http://wdystv.com/bbs/list.asp?boardid=4) ---- IE中伪类:hover的使用及BUG (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=1552) |
||||
-- 作者:乐魔舞 -- 发布时间:2008/5/10 16:47:39 -- IE中伪类:hover的使用及BUG :hover是我们在CSS设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类:hover,比如我们常见的纯CSS菜单、相册效果等等。 或许用了这么久的伪类:hover,还有部分朋友还不完全了解hover的规则: 引用: 但目前IE5.5、IE6仅支持CSS1中的:hover,不过新出的IE7是支持CSS2中的:hover。 当我们用伪类:hover做某些特殊效果时,依据CSS2很好完成,但为了现在占据主流浏览器的IE6,我们又不得不做很多工作,比如给添加a元素等来模拟完成最终的效果。 或许这样讲太空洞,请看下面一个常见的触发显示的例子(仅选择IE6为例讲解)。 我们先用CSS2的写法来实现: XHTML部分: <ul> * {margin:0; padding:0;} 大家可以测试发现在FF等对CSS2支持很好的浏览器中,可以显示我们所要达到的效果,但在IE6中却无法实现。 下面让我们换一种思维,所用CSS1的写法来看看,这个时候由于无法支持li元素:hover的使用,我们只好把所有文字包含到a中,对a使用:hover,并且将要显示隐藏的部分放到span元素中,首先我们对XHTML进行部分调整,调整如下: XHTML部分: <ul> CSS部分: * {margin:0; padding:0;} 那到底是什么问题呢? 不是标准说明的错,也不是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个不同的值。
|