Hello!

IE6 链接悬停切换技巧

2013-03-07  |  IE6 

为了不动用JS,希望实现鼠标悬停切换图片的效果。很不幸IE6中没有看到你希望看到的结果。好吧,这不奇怪了。看看前人如何解释的:

IE6只在 "a" 元素上支持伪类 :hover, 这就表示如果想切换内容的可见性(常常用在自定义的tooltips或子菜单上)只能建立在悬停上或者使用JavaScript的方法。

当切换的内容比较复杂时,我们一般不使用这样的方法。由于a元素通常是一个内联元素,并且他的后代元素不能是像ul,div或者p那样的块级元素,为了做好语义化这样的标签也是不可能使用的。因此我们通常限制使用,只做一些像tooltip那样的简单内容。

哎!这看上去像是努力在IE6上利用 :hover 切换一个链接的子元素的display属性(通常是修改"none"到"block")。这就是一个web 开发人员要去做的吗?

或多或少的解释一下这种行为

“IE6 不喜欢有一个块级元素突然出现在一个内联元素的a中”

这事实上和IE6不相关, 主要是其它像Safari这样的浏览器,在决定是否显示子内容,以什么样的布局显示有所不同(其它一些关于样式定位问题也有关系)。

请检查下面的例子:

#demo1 #a1 { display: block; }
#demo1 a .content { display: none; }
#demo1 a:hover .content { display: block; }

“IE6 需要那些悬停链接发生一些改变时去考虑重新渲染他的后代元素”

事实上确实是这样的。在渲染显示子元素时,包括这个链接在内需要一些 CSS 属性被明确指定的改变(比如背景色的改变)。这个改变甚至可以不是一个真正的变化(显然除了 display外)。设置 background-color:transparent 这像耍了个小伎俩。虽然如此,在使用 display:block 这条路上能得到正确的结果。代码如下:

#demo2 a { display: block; }
#demo2 a .content { display: none; }
#demo2 a:hover { background-color: transparent; }
#demo2 a:hover .content { display: block; }

方案:使用 visibility 代替

这个技巧是要设置所有元素成为块级元素再去切换可见性(visiblity)属性。因为不需要回流表面上IE6有打断这种假象(我猜这样会有这样的感觉),既然 visibility 不能回流,但是正是显示与隐藏这时保持了布局。 下面的代码已经在 IE6+(显示包括了IE8,此时IE8 已比 IE6 多了), Firefox 2+, Safari4 and Opeara 9.2+ (没有Safari3或者Chrome上测试),试试看下面的代码: #demo3 a { display: block; } #demo3 a .content { display: block; visibility: hidden; } #demo3 a:hover { background-color: transparent; } #demo3 a:hover .content { visibility: visible; }

总结

所有的现代浏览器和IE6-7中在一个链接上只使用样式切换元素的可见性是可能的。没有CSS hacks没有条件注释。生活是不是很美好?

原文地址:IE6 in-link hover toggling trick