伯樂線上導讀：IE 瀏覽器不支援很多 CSS 屬性是出了名的，即便在支援的部分中，也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 問題，有簡單的問題示例，也有解決方法。 這個系列共有 58 個指南，70 個解決方案。這篇由伯樂線上前端開發小組的 @rubyisapm 翻譯。（歡迎更多前端開發朋友來加入“前端開發”小組。）
【提示】：IE CSS BUG 系列譯文正在進行中，後續或有改動和調整，請不要轉載本系列的譯文。
—————————————————————————–
32樣式限制
受影響的版本
IE6，IE7，IE8（譯者注：在IE9中切換瀏覽器版本為7、8、9均出現此bug，在IE11中切換瀏覽器版本均沒有出現該bug，這個…..僅供參考）
表現
排在第32個（及之後的）樣式會被忽略（例如<style>、<link>或@import）
教程日期
2009 8.12 14:58:58 星期三
描述
如果你正在維護一個網站，裡面包含了很多第三方的廣告或應用程式，這些第三方的東西會依賴於他們自己的<style>（或<link>）元素，本文中的bug就會令你抓狂…..我這裡說的很多意思是32個。讓我們來看看下面的演示，然後我再解釋。
演示
由於該bug的天然特性，這個演示在一個單獨的頁面上：
HTML Code：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<style type="text/css"></style> <!--1--> <style type="text/css"></style> <!--2--> <style type="text/css"></style> <!--3--> <style type="text/css"></style> <!--4--> <style type="text/css"></style> <!--5--> <style type="text/css"></style> <!--6--> <style type="text/css"></style> <!--7--> <style type="text/css"></style> <!--8--> <style type="text/css"></style> <!--9--> <style type="text/css"></style> <!--10--> <style type="text/css"></style> <!--11--> <style type="text/css"></style> <!--12--> <style type="text/css"></style> <!--13--> <style type="text/css"></style> <!--14--> <style type="text/css"></style> <!--15--> <style type="text/css"></style> <!--16--> <style type="text/css"></style> <!--17--> <style type="text/css"></style> <!--18--> <style type="text/css"></style> <!--19--> <style type="text/css"></style> <!--20--> <style type="text/css"></style> <!--21--> <style type="text/css"></style> <!--22--> <style type="text/css"></style> <!--23--> <style type="text/css"></style> <!--24--> <style type="text/css"></style> <!--25--> <style type="text/css"></style> <!--26--> <style type="text/css"></style> <!--27--> <style type="text/css"></style> <!--28--> <style type="text/css"></style> <!--29--> <style type="text/css"></style> <!--30--> <style type="text/css"></style> <!--31--> <style type="text/css">p { border: 5px solid #000; }</style> <!--32--> <p>I should have borders!</p> |
首先，儘管我在示例中用了32個<style>元素，<link>元素和表單中連結的@import url()一樣會受到這個限制的影響；所有這些元素可以疊加產生32個style的限額（雖然@import的極限貌似是35）。（譯者注：據自測，@import形式的引入樣式限制也是32）
在演示中，第32個<style>元素設定了<p>元素的邊框，在IE中，除非你刪掉這個之前的某些<style>元素，不然P元素是不會被設定邊框的。
解決方案
以下是針對此bug的解決方案
方案（偽bug）
教程日期
2009 8.12 15:28:11 週三
修復版本
所有受影響的版本
描述
如果你在實際網站開發中遇到了這個問題，你也許不能選擇用“更少的樣式標籤”，解決方案可能會變得更復雜。基於那個事實，在修正的演示中，我會展示達到限制條件的情況：
由於該bug的天然特性，這個演示在一個單獨的頁面上：（譯者注：此處的頁面連結有錯誤，跟前一個演示連結是一樣的，明顯和下面的html程式碼不符）
HTML 程式碼：
|
1 2 3 |
<style type="text/css">p { border: 5px solid #000; }</style> <!--1--> <p>I should have borders!</p> |
如果你不能採取“使用更少的樣式標籤”的解決辦法，問題就會變得更復雜。最好的方案就是採用一個後處理，將超量的樣式進行合併放入一個style裡（如將多個<style>元素中的樣式放入一個<style>元素中）。
如果<style>元素中的內容是靜態的，你可以簡單地複製程式碼並將它放在限制標籤前面的<link>/<style>元素中。
如果你已經火燒眉毛，需要一個快速修復方法的話，下面是我在the page where I found the bug找到的一段jQuery程式碼，我沒有測試過這段程式碼，所以使用者風險自負哦~程式碼是這樣的：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(document).ready(function(){ // If msie and we have more than the allotted stylsheets... if ( $.browser.msie && $('style').length != document.styleSheets.length ) { var ssAry = $('style'); // Loop through the extra stylesheets not read and apply the styles found for ( var i = document.styleSheets.length; i < ssAry.length; i++ ) { var cssText = ssAry[ i ].innerHTML; // Replace newlines and then comments cssText = cssText.replace(/[\n\r]/g, ""); cssText = cssText.replace(/\/\*\**[^\*\/]*\*\//g, ""); // Loop over all CSS selector groups... var regex = new RegExp(/{[^}]*}/); for ( var value = regex.exec( cssText ); value; value = regex.exec( cssText ) ) { // Split the css grouping into the selector and the CSS properties var pair = cssText.substring( 0, regex.lastIndex ) .replace(/}/g, "").split(/{/); // Add it to the last DOM stylesheet document.styleSheets[ document.styleSheets.length - 1 ].addRule( pair[ 0 ].replace(/^\s+|\s+$/g, ""), pair[ 1 ].replace(/^\s+|\s+$/g, "") ); // Strip off the applied CSS cssText = cssText.substring( regex.lastIndex ); } } } }); |
請注意，你不應使用這段程式碼作為此問題的永久性修復方案。