程序员人生 网站导航

置换元素在IE浏览器中的疑难杂症

栏目:htmlcss时间:2013-12-13 07:58:09
置换元素在 IE 浏览器中有不少问题,比方说置换元素的行高就是其中难题之一,当然还有 form 元素 textarea 的边距继承 bug,OK,今天再介绍几个,凑满一箩筐。

置换元素与A标签
场景:
IE6,A标签内的图片(置换元素),默认隐藏,hover显示

html:

<a href="#">
<img src="" />
</a>
CSS
a img{display:none}/*使用visibility也行*/
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>
css:

a{position:relative}
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>
css

a span{display:inline-block}/*float,absolute,zoom都行*/

现象:
图片区域链接无效

Demo:demo3

解决方法:

还原span容器的hasLayout
尽量不要采用此类布局
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐