伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@daozen 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響版本
該bug影響：IE8、IE7、IE6
表現
用’filter’方法修正了PNG透明度之後連結上背景影象的透明部分不能點選。
教程時間
2009.7.19 星期天 15:03:44
描述
問題：我們用透明PNG圖片作為連結的背景並用filter方法解決了IE下的alpha透明度問題。結果IE又怎麼了？影象的透明部分變得不能點選了。讓我們來看看例子。
Demo
由於這個bug的天然特性，示例在一個獨立的頁面
HTML程式碼
|
1 |
<div><a href="#">Lorem Ipsum</a></div> |
CSS程式碼
|
1 2 3 4 5 6 |
a { display: block; background: url(ring.png) no-repeat; width: 100px; height: 100px; text-indent: -999px; } |
條件註釋程式碼
|
1 2 3 4 5 6 7 8 9 |
<!--[if IE]> <style type="text/css"> a { background: none; cursor: pointer; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale"); } </style> <![endif]--> |
我們這裡有什麼呢？一個應用了display:block的連結（<a>），其background設定一個PNG格式的黑圓圈影象，除了黑圓圈之外的部分都為透明的。我們用只適合IE的filter屬性來修復IE重色的PNG透明部分。問題在於？IE當中圓圈的透明部分不可點選。
解決方法
以下是以型別安排的解決上述bug的方法。
解決方法（Javascript方法）
解決日期
2009．07.19 15:17:23
解決瀏覽器版本
所有受影響的版本
描述
我來告訴你一個小祕密吧：如果我們給我們的連結設定background的話這個bug就修復了…不過等一下，我們能這麼幹嗎？我們先來看一下我們的示例。
由於這個bug的天然特性，示例在一個獨立的頁面上。
HTML程式碼
|
1 |
<div><a href="#">Lorem Ipsum</a></div> |
CSS Code
|
1 2 3 4 5 6 |
a { display: block; background: url(ring.png) no-repeat; width: 100px; height: 100px; text-indent: -999px; } |
條件註釋
|
1 2 3 4 5 6 7 8 9 |
<!--[if IE]> <style type="text/css"> a { background: url(#); /* or point to a transparent gif. EDIT: see comments */ cursor: pointer; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale"); } </style> <![endif]--> |
嘿嘿開掛啦！我們在IE中將background設定為一個“影象”，不過影象的url()僅僅只是一個#號。更新：看到有使用者評論說用about:blank怎麼樣。這裡實際上就是將background的url()設定為當前頁面上——沒錯，這樣會產生額外的HTTP請求，不過我覺得這不值得擔心，因為那時候頁面已經快取好了。IE的行為總是變幻莫測，這就是其中一個例子。
更新：就像一位評論者所指出的一樣。這個額外的HTTP請求可能會影響頁面的點選率等問題。如果你擔心這個問題的話，你可以把background連結的#號替換為你的CSS檔案（這個檔案也是被快取的），如果覺得這還不夠徹底的話，建立一個透明GIF檔案並把背景設為它。再補充說明一下，如果這個解決方法只在條件註釋裡面實施的話，那個額外的請求只會在IE瀏覽器裡面發生。