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

置换元素在 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 标签内的图片

解决方法：

1. hover 时触发 a 标签的 hasLayout

   a:hover{ 
         _zoom:1; 
      } 

2. 使用 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

解决方法：

1. 使用visibility代替display
2. 清除span元素的position
3. 使用脚本

一个更极端的例子：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

解决方法：

1. 还原span容器的hasLayout
2. 尽量不要采用此类布局