伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @szxw 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
noscript幽靈BUG
受影響版本
該BUG影響: IE8，IE7，IE6
表現
當script受支援時，<noscript>仍然會顯示，只有邊框和背景會顯示。
教程日期
2009-07-19 15:53:21 星期日
描述
發現這個BUG首先要感謝 Position is Everything 。這個BUG除了像他們描述的那樣在IE8下出現外，IE6和IE7也受到了影響，雖然並不嚴重。讓我們看一下示例吧。
示例
根據這個BUG特性構造的一個示例在一個單獨頁面上。
HTML 程式碼：
|
1 2 |
<div>bar</div> <noscript>CAN HAS SKRIPTZ! PLZ??! KTNX!</noscript> |
CSS 程式碼：
|
1 2 3 4 5 6 7 |
noscript { border: 5px solid #000; background: #f00; display: block; width: 500px; height: 100px; } |
<div>元素的作用只是觸發，實際上，你可以用文字或者其他任何正常頁面上會有的東西來替換它。當我們在把<noscript>元素的display屬性設定為block的同時，也為它設定background和border。在IE8下，整個<noscript>元素以我們設定的寬度，高度帶著邊框和背景顯示出來了，雖然沒有顯示裡面的文字(我們在討論script元素可用的情況下)。IE6和IE7下只顯示了<noscript>元素的上(或者下？)邊框。
解決方案
下面是按照解決方案型別排序的對上述問題的解決方案。
解決方案(JavaScript方案)
解決方案日期
2009-07-19 16:00:25 星期日
修復版本
所有受影響版本
描述
既然這個BUG在script可用的情況下才會出現，呢麼我們可以用JavaScript來修復它。讓我們先看一下修復後的示例： 根據這個BUG特性構造的一個示例在一個單獨頁面上。
HTML 程式碼：
|
1 2 |
<div>bar</div> <noscript>CAN HAS SKRIPTZ! PLZ??! KTNX!</noscript> |
CSS 程式碼：
|
1 2 3 4 5 6 7 |
noscript { border: 5px solid #000; background: #f00; display: block; width: 500px; height: 100px; } |
JavaScript 程式碼：
|
1 2 3 4 5 6 |
window.onload = function () { var els = document.getElementsByTagName('noscript'); for ( var i = 0; i < els.length; i++ ) { els[i].style.display='none'; } } |
我們的JS指令碼唯一需要做的就是把頁面內所有的<noscript>元素的display屬性設定為none。noscript元素從頁面上隱藏了，沒有BUG了。很簡單，不是嗎？