眾所周知做前端開發的都恨不得踹IE開發人員幾腳，IE開發人員名聲之差不低於GFW開發人員，昧著良心搞壞市場，人人得而誅之，但是在中國這些地方市場佔有率擺在那裡，沒辦法只能向現實低頭。
最近我們產品需要在瀏覽器裡動態載入一段CSS，以前的代碼是直接用的:
複製代碼 代碼如下:
var bubbleCss = document.createElement('style');
bubbleCss.type = 'text/css';
bubbleCss.innerHTML = blc_conf.bubbleStyle;
document.getElementsByTagName('head')[0].appendChild(bubbleCss);
不過這個只有IE9支援，在IE8下會出問題，一直也沒注意到這塊，直到最近重構後做完整測試的時候才發現。
網上搜到一個技巧，試過，可行，但是有一些問題
複製代碼 代碼如下:
window.bc_bubble_css = blc_conf.bubbleStyle;
document.createStyleSheet("javascript:bc_bubble_css");
這裡可以建立由變數bc_bubble_css定義的樣式，不過由於HTML5逐漸普及，我們的css裡也混入了一些css3 selector，使用這個方法會導致IE8的parser解析到css3 selector的時候拋異常並停止解析後續css，這讓css只載入了一半，網上搜到的辦法都是用StyleSheet類型的addRule來增加，不過這個需要自己指定css2 selector以及樣式，
因此需要從CSS中拆開單個的規則，然後依次調用addRule，例子：
複製代碼 代碼如下:
var s = document.createStyleSheet();
var rules = blc_conf.bubbleStyle.replace(/\/\*[^\*]*\*\//g, "").replace(/@[^{]*\{/g, '').match(/[^\{\}]+\{[^\}]+\}/g);
for(var i = 0; i < rules.length; i++) {
var m = rules[i].match(/(.*)\s*\{\s*(.*)\}/);
if(m) {
try {
s.addRule(m[1], m[2]);
} catch(e) {
}
}
}
開頭有兩個替換，分別去掉注視和部分css3 的selector，不過依然有漏網的selector，需要在後面try catch 捉一下。
另外再次鄙視設計IE介面的人
