haslayout引起的IE6 :hover失效

时间：2009年05月27日作者：愚人码头查看次数:5,989 views评论次数：2

大家都知道IE6之支持<a>标签的:hover为了，但是通常在做实际效果的时候<a>标签 :hover在IE6下会失效，

看代码：


< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a:hover { }
a:hover span{color:#F00;}
</style>
</head>

<body>
<a href="#">鼠标经过时改变我的<span>颜色</span></a>
</body>
</html>

在IE6下“颜色”根本就不会变成红色，其他浏览器都是好的，要解决这个问题就必须触发a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《haslayout引起的IE6 :hover失效》

如果你读了我的文章，觉得有帮助： 说明
标签：,,分类：html+css

您可能感兴趣的文章

2条评论
  1. 没事看看留言于:2009年07月10日10:56

    经过测试，就a:hover{zoom:1}而言，a:hover的伪类设置任何的属性都会有效的，不知道为什么，而haslayout被戏称为尺寸臭虫。
    我是看了别人的文章的，测试了一下，好像不是haslayout的问题，原因不明。
    参看：http://www.blueidea.com/tech/web/2009/6796.asp

    [回复]

  2. 周威（zoowar）留言于:2011年11月09日00:51

    愚人兄，其实这问题的解决方案只需要给a标签加个链接就可以解决这个bug了，目前只有IE下不加超链接会失去a标签的：hover.没有超链接就要加个空链接。

    [回复]

发表评论

*

*