CSS:通过一个样式表区分IE的各个版本 ---- Hiro技术站

分享到

新浪微博

豆瓣

QQ空间

Twitter

CSS:通过一个样式表区分IE的各个版本

分类:CSS、XHTML 发表时间:2010年05月17日字体大小:12号 14号

通常我们知道为了修复IE各个版本与其他浏览器的兼容，在head标签内会添加条件判断，根据不同的判断结果联入不同版本的CSS样式表。如下：

1
2
3

<!--[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样式控制。如下：

1 2	#main {background: white;} #ie6 #main {background: black;}

是不是你看到了也觉得惊奇呢，我就在感慨我怎么之前没有看到过这样的技巧文章了，发现原来该博主今天才更新了该文。我实在太幸运了，在我的新版主题里，我将采用这种区别IE版本的方法来控制css样式。

追加一个Demo页面，大家可以通过IETester查看，不同版本下，样式是不一样的。

download demo

Demo的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;}

Demo的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]-->

该技巧学习自文章：Target Every Version of IE from a Single Stylesheet