置換元素在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 標簽內的圖片

解決方法：

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
盡量不要采用此類布局