:hover 在 IE6 下的一个 Bug

看到标题,相信会很容易联想到 IE6 不支持除 a 外的 :hover 伪类,不过这只能说是万恶的 IE6 对于 CSS 选择器的支持太差了,还不能说是 Bug 。而接下来 Kayo 要说明的,是个实实在在、不折不扣的 Bug 。

这个 Bug 是关于一个比较常用的效果 —— hover 后改变子元素效果。

例如,有如下的一个导航, hover 后的链接中的文字会改变颜色

<div id="nav">
	<ul>
		<li><a href="#" title="#"><span>链接一</span></a></li>
		<li><a href="#" title="#"><span>链接二</span></a></li>
		<li><a href="#" title="#"><span>链接三</span></a></li>
		<li><a href="#" title="#"><span>链接四</span></a></li>
		<li><a href="#" title="#"><span>链接五</span></a></li>
	</ul>
</div>
* {margin: 0; padding: 0; }
		
#nav {background: #2595e5; font-size: 16px; overflow: hidden; zoom: 1; }
#nav ul {list-style: none; }
#nav ul li {float: left; margin-left: 15px; padding: 8px; }
#nav ul li a {text-decoration: none; }
#nav ul li a span {color: #fff; }
#nav ul li a:hover span {color: #c6c6c6; }

情况很容易想象,当鼠标移到导航上的链接时,链接颜色变为白色,的确,在绝大数浏览器上都会如此,但在 IE6 上却没有反应。如下面的 Demo :

https://kayosite.com/demo/ie6-hover.html

那么,问题出现了,应该如何解决呢?

可以为 a:hover {} 添加一些属性,例如 margin ,padding 等,当然,为了不影响导航原来的布局,最好当然是添加 zoom: 1 ,为上面的 CSS 添加如下的一句:

#nav ul li a:hover {zoom: 1; }

如 Demo :https://kayosite.com/demo/ie6-hover-fix.html

于是又神奇地正常了,可能阅读到这里,会有读者认为,这肯定又是 hasLayout 在作怪,于是加入一个在 IE6 下不会触发 hasLayout 的属性 overflow: hidden ,结果可能你也猜到了,使用这个属性也能使到 :hover 恢复正常。

当然,IE6 是个奇葩,如果只是这样,我是不会觉得惊奇的,最神奇的是,加入一个不存在的属性 aaa:bbb 都能使到 :hover 恢复正常。因此,这个问题可以说是 IE6 下一个绝对的 Bug 了。

本文由 Kayo Lee 发表,本文链接:https://kayosite.com/ie6-hover-bug.html

评论列表

  • 评论者头像
    回复

    IE6 真是很蛋碎的东西。调试工具的话,kayo 学长主要用什么?IEtester?这个在我 win7 上好崩溃啊。用 IE 的调试工具,最低只能调试到 IE7 的模式。

    • 评论者头像
      回复

      @潜行者m 其实我用的也只是IEtester和IE 自带的开发工具,觉得IE自带的开发工具会比较稳定,更好用,虽然最低只能调试到IE7,但毕竟IE6是个很不标准的浏览器,很多时候经验会比调试工具有用,这个就需要多练习累积了

      • 评论者头像
        回复

        @Kayo IE自带的开发工具有时候还是不准的,最近的一个业务中,在 win7 的 IE10 下的 IE8 的渲染模式,跟 XP 下 IE8 浏览器的显示效果竟然是不一样的,在 XP 下的 IE8 内容神奇的消失了,而 IE10 渲染的 IE8 是正常的。IEtester 算是比较准确,但是我电脑上用不了,一开就崩溃。

  • 评论者头像
    回复

    这个不错的,我一直用的 :mrgreen:

  • 评论者头像
    回复

    现在不像前几年了,IE真的要走远了

    • 评论者头像
      回复

      @大发 嗯,看着 IE 日渐走远,前端的方向也应该偏向于高效率的页面建设中,而不是费时间去做兼容了!

  • 评论者头像
    回复

    很早就放弃IE6了

  • 评论者头像
    回复

    IE6还有多少人用呀。。

    • 评论者头像
      回复

      结果你料想不到,到今年前三月份为止,国内还有18.66%的人在用 IE6 ,估计是因为万恶的盗版 XP 绑定了 IE6 ,而很多人还是不会选择其他浏览器,作为开发者,也挺无奈的。

  • 评论者头像
    回复

    其实不用那么麻烦。。在body上针对IE6加载一个.htc脚本就能解决了

    • 评论者头像
      回复

      @S-kias 这种bug相对比较冷,不一定有相应的.htc文件,即使有,.htc 也是插件 hacks ,用原生的 css 解决总比用 hacks 解决好吧,这些无关麻不麻烦,是页面性能与可维护的问题

      • 评论者头像
        回复

        @Kayo 好吧,我没有仔细看文章。。。这CSS解决比hack解决代码量少得多

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail