一起CSS

当前位置:一起CSS > CSS > 文章正文

:hover伪类在IE6中的BUG

日期:2008-10-20 分类:CSS

:hover 是我们在 CSS 设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类 :hover,比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类 :hover,还有部分朋友还不完全了解 :hover 的规则:

CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性(特性)的 a 对象,此伪类不发生作用。

CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover,不过新出的 IE7 是支持 CSS2 中的 :hover

当我们用伪类 :hover 做某些特殊效果时,依据 CSS2 很好完成,但为了现在占据主流浏览器的 IE6 ,我们又不得不做很多工作,比如给添加 a 元素等来模拟完成最终的效果。

或许这样讲太空洞,请看下面一个常见的触发显示的例子(仅选择 IE6 为例讲解)。

我们先用 CSS2 的写法来实现:

XHTML 部分:

<ul>
	<li>鼠标移过来触发我吧!<a href="#" title="">哈哈,终于被你发现了!</a></li>
</ul>

CSS 部分:

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a { display:none;}
li:hover a { display:block; text-decoration:none; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中,可以显示我们所要达到的效果,但在 IE6 中却无法实现。

下面让我们换一种思维,所用 CSS1 的写法来看看,这个时候由于无法支持 li 元素 :hover 的使用,我们只好把所有文字包含到 a 中,对 a 使用 :hover ,并且将要显示隐藏的部分放到 span 元素中,首先我们对 XHTML 进行部分调整,调整如下:

XHTML 部分:

<ul>
	<li><a href="#" title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li>
</ul>

CSS 中我们将 a 的设置成块级元素,并使 a 的大小和宽度和 li 的相同,并设置 a 为相对位置,用 a 来模拟上例中的 li ;而用 span 来模拟上例中的 a ,设置 span 在默认情况下隐藏(display:none;),当 a 被触发时(:hover),则 span 显示(display:block;)

CSS 部分:

* { 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 span { display:none;}
li a:hover span { display:block; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

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

那到底是什么问题呢?

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

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

这个 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 个不同的值。

文章转摘自:PlanABC - 怿飞’s Blog

原文地址:http://www.planabc.net/2007/02/15/ie_hover_bug/

查看:1,169 评论:3 标签:,,

相关日志

共有 3 条评论

  • [...] IE6 的 BUG,关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG,这里给 a:hover 加 border:0,即 CSS [...]

  • feng 说:

    li:hover
    =========
    我在IE SP3中可以识别的,但是 li:hover a 不能识别
    =====

    ========
    .nav li a{
    width:82px;
    height:33px;
    display:block;
    }
    .sou{
    background:url(../images/nav_souye_B.gif);
    }
    .sou a:hover{
    background:url(../images/nav_souye_A.gif);
    }
    .zhuan{
    background:url(../images/nav_zuanjie_B.gif);
    }
    .zhuan a:hover{
    background:url(../images/nav_zuanjie_A.gif);
    }

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved