伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的@emicats2013 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
影響的版本：
IE8、IE7、IE6
症狀：
當點選標籤<label>裡面的<img>元素的時候，瀏覽器不會自動將焦點轉移到和標籤相關的表單控制元件上。
教程日期：
Wed Aug 19 15:38:47 2009
描述：
這個bug是在 Gérard Talbot 的 IE8 Bug 頁面列出的，這還要歸功於Batiste Bieler。”前段時間我也“有幸在自己做的網站上遇到這個Bug了，當然這一點也不好玩。我們一起來看看這個bug：
Demo演示：
如需檢視完整demo，請點選這個頁面
HTML程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<form action=""> <ul> <li> <label for="one"><img src="hl_logo.png" alt=""></label> <input type="text" id="one"> </li> <li> <label for="two"><img src="hl_logo.png" alt=""></label> <textarea cols="10" rows="3" id="two"></textarea> </li> <li> <label for="three"><img src="hl_logo.png" alt=""></label> <input type="checkbox" id="three"> </li> <li> <label for="four"><img src="hl_logo.png" alt=""></label> <input type="radio" name="foo" id="four"> </li> <li> <label for="five"><img src="hl_logo.png" alt=""></label> <input type="radio" name="foo" id="five"> </li> </ul> </div> |
CSS程式碼：
|
1 2 3 4 5 6 7 8 9 |
li { overflow: hidden; display: inline-block; /* gives layout for IE float clearing */ } li { display: block; } label { float: left; } |
這個Demo程式碼比較長，是為了更全面地展示實際開發中的<form>，而且也能更好說明這個Bug的 CMS（Clean Markup Solution）解決方案。
這個bug的本質就是，如果標籤<label>元素裡面是一個<img>元素，當你點選<img>元素，沒有任何觸發，瀏覽器不會像<label>中的普通文字那樣，把焦點轉移到和標籤相關的表單控制元件上，一切就好像什麼都沒有發生過一樣。
解決方案：
以下是按照解決方案型別排序的解決方案：
解決方案 (清理標記方案)
解決方案日期：
Wed Aug 19 15:38:47 2009
解決版本：
受影響的全部版本
描述：
既然是img元素的問題，那麼就要邀請<span>元素來幫忙，我們來看看如何去實現:
已修復的示例可在這裡檢視
HTML程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<form action=""> <ul> <li> <label for="one"><span></span><img src="hl_logo.png" alt=""></label> <input type="text" id="one"> </li> <li> <label for="two"><span></span><img src="hl_logo.png" alt=""></label> <textarea cols="10" rows="3" id="two"></textarea> </li> <li> <label for="three"><span></span><img src="hl_logo.png" alt=""></label> <input type="checkbox" id="three"> </li> <li> <label for="four"><span></span><img src="hl_logo.png" alt=""></label> <input type="radio" name="foo" id="four"> </li> <li> <label for="five"><span></span><img src="hl_logo.png" alt=""></label> <input type="radio" name="foo" id="five"> </li> </ul> </div> |
CSS程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
li { overflow: hidden; display: inline-block; /* gives layout for IE float clearing */ } li { display: block; } label { float: left; position: relative; overflow: hidden; } label span { position: absolute; left: 0; top: 0; width: 500px; height: 500px; background: url(hl_logo.png) no-repeat -5000px; /* required for IE click bug fix */ } |
我所做的，就是在每個<label>元素中，都在<img>前面插入了一個空的<span>元素，為了消除<span>給<img>帶來的偏移，我們給<label>加了一條css: {position: relative;}，然後給<span>一個絕對定位並將top和left設定為0，確保<span>在老版IE裡不會有令人匪夷所思的偏移。我還設定了足夠大height 和 width 確保它可以覆蓋整個<img>元素。我還給label設定了{ overflow: hidden; } 來隱藏<span>多餘的寬/高。 因為<label>是浮動的，所以我並沒有給它設定明確的維度大小。
現在，最有趣的部分在於<span>的background屬性：這個解決的是在IE上<span>自己的顯示Bug，我認為這個Bug跟“Partial Click Bug v2”有關。問題是，我們需要設定<span>為透明背景來透過它顯示影像，但它還需要一個不透明的背景來阻止Bug的發生（這裡Bug是指單擊跨過<span>，落到圖片，導致聚焦失敗）。
我的解決方法是用<img>元素中的圖片來設定這個背景圖片，因為這個圖片會被快取下來，而且給它一個位置偏移讓它消失在視野中。當然，你可以設定任何圖片背景，甚至可以指定 background: url(#); 或者 background: url(your_css_file.css); 如果這些讓程式碼顯得很混亂，你也可以建立一個透明背景的gif圖片，把它作為背景。
這個問題解決了，現在<img>在受所影響的IE中都可點選了。$$￣▽￣)/