置换元素在 IE 浏览器中有不少问题,比方说置换元素的行高就是其中难题之一,当然还有 form 元素 textarea 的边距继承 bug,OK,今天再介绍几个,凑满一箩筐。
置换元素与A标签
场景:
IE6,A标签内的图片(置换元素),默认隐藏,hover显示
html:
<
a
href
="#"
>
< img src ="" />
</ a >
< img src ="" />
</ a >
CSS
a img
{
display
:
none
}
/*
使用visibility也行
*/
a:hover img { display : block ; }
a:hover img { display : block ; }
现象:
ie6,hover后无法正常显示 a 标签内的图片
解决方法:
- hover 时触发 a 标签的 hasLayout
a:hover {
_zoom : 1 ;
} - 使用 JS 脚本添加 class
Demo:demo1
置换元素与position
在前面的基础上给 img 加上容器,设置position,默认隐藏,hover 显示
html:
<
a
href
="#"
>
< span >
< img src ="" />
</ span >
</ a >
< span >
< img src ="" />
</ span >
</ a >
css:
a
{
position
:
relative
}
a span { position : absolute ; display : none ; }
a:hover span { display : block ; }
a span { position : absolute ; display : none ; }
a:hover span { display : block ; }
现象:
ie6,hover后无法正常显示 a 标签内的图片,触发其 hasLayout 可以显示,但无法再次隐藏
Demo:demo2
解决方法:
- 使用visibility代替display
- 清除span元素的position
- 使用脚本
一个更极端的例子:The IE ‘non-disappearing content’ bug
图片与hasLayout
同样的例子,如果 img 的容器 span 元素被触发 hasLayout 则会导致 a 链接在 IE6/7 浏览器下失效(图片区域)
html:
<
a
href
="#"
>
< span >
< img src ="" />
</ span >
</ a >
< span >
< img src ="" />
</ span >
</ a >
css
a span
{
display
:
inline-block
}
/*
float,absolute,zoom都行
*/
现象:
图片区域链接无效
Demo:demo3
解决方法:
- 还原span容器的hasLayout
- 尽量不要采用此类布局