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美化文件上传表单