CSS-通過一個樣式表區分IE的各個版本

2020-03-24 19:12:42

字體：大中小

來源：轉載

供稿：網友

通常我們知道為了修復IE各個版本與其他瀏覽器的兼容，在head標簽內會添加條件判斷，根據不同的判斷結果聯入不同版本的CSSyangshi_10628_1.html' target='_blank'>CSS樣式表。如下： !--[if IE 6] link rel="stylesheet" type="text/css" href="ie6.css" / ![endif]--
!--[if IE 7] link rel="stylesheet" type="text/css" href="ie7.css" / ![endif]--
!--[if IE 8] link rel="stylesheet" type="text/css" href="ie8.css" / ![endif]-- 這樣的方法在我所有的網站或者博客中都是如此應用，但我也一直在糾結著多出了多余的樣式表文件，HTTP請求也就多了一個。這對于我這個做前端的是一個嚴重的問題，但一直都沒有找到可以優化的方法。但是今天我看到了一篇文章，他教會了我另一種條件判斷的方法。可以用條件判斷的結果來添加多余的包含標簽。同時也發現，自己思考的太少了。實現方法如下：
!--[if IE 6]
div id="ie6"
![endif]--
div id="content"
div id="main" /div
div id="sidebar" /div
/div
div id="footer" /div
!--[if IE 6]
/div
![endif]-- 通過這樣的方法，我只需要一個樣式表文件，然后在樣式表中通過子選擇器的方法來給出相應版本的css樣式控制。如下：#main {background: white;}
#ie6 #main {background: black;} 是不是你看到了也覺得驚奇呢，我就在感慨我怎么之前沒有看到過這樣的技巧文章了，發現原來該博主今天才更新了該文。我實在太幸運了，在我的新版主題里，我將采用這種區別IE版本的方法來控制css樣式。css樣式：
* { margin:0; padding:0;}
body { font:24px Tahoma, Geneva, sans-serif; color:#666;}
#main { margin:30px auto; width:400px; height:100px; line-height:100px; border:1px solid #ccc; background:#eee; text-align:center;}
#ie8 #main { color:#f00; border-color:#f60; background:#9FF;}
#ie7 #main { color:#36F; border-color:#009; background:#F0F;}
#ie6 #main { color:#f60; border-color:#090; background:#FFC;}Html源碼： !--[if IE 8]
div id="ie8"
![endif]--
!--[if IE 7]
div id="ie7"
![endif]--
!--[if IE 6]
div id="ie6"
![endif]--

div id="main" Target-IE-Version /div

!--[if IE 6]
/div
![endif]--
!--[if IE 7]
/div
![endif]--
!--[if IE 8]
/div
![endif]--html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：組織規劃構建合理高效的CSS系統

下一篇：巧用label標簽和CSS美化文件上傳表單