針對IE瀏覽器的CSS樣式（兼容性）

時間 2019-11-18

原文原文鏈接

1. IE hacks:css

"_"  是IE6 專有的hack;
"\9" 對IE6-IE10都有效；
"\0"對IE8-IE10都有效；
"\9\0"對IE9-IE10都有效；

優勢:html

CSS hacks 內嵌在普通的 CSS 裏面，不會產生更多 HTTP 請求。CSS hacks 內嵌在普通的 CSS 裏面，編寫時比較方便。瀏覽器

缺點:spa

　　它是不標準的產物。內嵌在其餘 CSS 中，不便維護。尤爲是當 hacks 的數量比較多的時候維護簡直是個惡夢。內嵌在其餘 CSS 中，即便在非 IE 瀏覽器中也會被加載，浪費資源。code

2.條件註釋 CSS:htm

<!--[if IE 6 ]>
　　　< link rel="stylesheet" type="text/css" media="all" href="./ie6.css" />
< ![endif]-->

<!--[if lte IE 8 ]> 
　　 <link rel="stylesheet" type="text/css" media="all" href="./assets/css/ie8.css" /> 
<![endif]-->

條件註釋是一種 IE 專有的、對常規（X）HTML 註釋的 Miscrosoft 擴展。從 W3C 標準來講，它也是不標準的產物，但它是微軟官方推出的針對 IE 進行開發的方式，blog

　　而且條件註釋對於其餘全部瀏覽器做爲常規註釋出現，所以對其餘瀏覽器無害
資源

優勢：開發

　　條件註釋 CSS 的好處是在獨立的 CSS 文件中編寫，能準確控制在特定的 IE 中加載，不會形成資源浪費，而且便於維護。class

缺點：

就是會產生多餘的 HTTP 請求，尤爲是當你須要兼容的 IE 版本不少的時候，你就須要產生多個 HTTP 請求，這對於原本通道數目就少的低版本 IE 來講無疑會影響頁面加載速度。

　　　　　　　　　　　　　　　　　　　　　　以上兩種方法不是很好，如下的方法相對來講會好點；

3.條件註釋 html 標籤：

　　這種方案也是利用條件註釋，但並非對 CSS 使用條件註釋，而是對 html 標籤使用條件註釋，引入不一樣的 class ，從而區分不一樣的 IE 以及其餘瀏覽器；

<!DOCTYPE html>  
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->  
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->