置換元素在IE瀏覽器中的疑難雜癥

置換元素在 IE 瀏覽器中有不少問題，比方說置換元素的行高就是其中難題之一，當(dāng)然還有 form 元素 textarea 的邊距繼承 bug，OK，今天再介紹幾個(gè)，湊滿一籮筐。

置換元素與A標(biāo)簽
場景：
IE6，A標(biāo)簽內(nèi)的圖片（置換元素），默認(rèn)隱藏，hover顯示

html：

<a href="#">
<img src="" />
</a>
CSS
a img{display:none}/*使用visibility也行*/
a:hover img{display:block;}

現(xiàn)象：
ie6,hover后無法正常顯示 a 標(biāo)簽內(nèi)的圖片

解決方法：

hover 時(shí)觸發(fā) a 標(biāo)簽的 hasLayout
a:hover{
_zoom:1;
}
使用 JS 腳本添加 class
Demo：demo1

置換元素與position
在前面的基礎(chǔ)上給 img 加上容器，設(shè)置position，默認(rèn)隱藏，hover 顯示

html:

<a href="#">
<span>
<img src="" />
</span>
</a>
css:

a{position:relative}
a span{position:absolute;display:none;}
a:hover span{display:block;}

現(xiàn)象：
ie6,hover后無法正常顯示 a 標(biāo)簽內(nèi)的圖片，觸發(fā)其 hasLayout 可以顯示，但無法再次隱藏

Demo：demo2

解決方法：

使用visibility代替display
清除span元素的position
使用腳本
一個(gè)更極端的例子：The IE ‘non-disappearing content’ bug

圖片與hasLayout
同樣的例子，如果 img 的容器 span 元素被觸發(fā) hasLayout 則會(huì)導(dǎo)致 a 鏈接在 IE6/7 瀏覽器下失效（圖片區(qū)域）

html:

<a href="#">
<span>
<img src="" />
</span>
</a>
css

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

現(xiàn)象:
圖片區(qū)域鏈接無效

Demo：demo3

解決方法：

還原span容器的hasLayout
盡量不要采用此類布局