创建IE各版本专属CSS IE中的if语句

最新推荐文章于 2025-10-11 21:40:16 发布

转载最新推荐文章于 2025-10-11 21:40:16 发布 · 457 阅读

文章标签：

#ie #css #stylesheet #浏览器 #firefox

css 专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何通过条件注释在不同版本的IE浏览器中加载特定的CSS文件，以及使用CSS hack来兼容各种IE版本的方法。此外，还提供了一个示例，展示了如何针对不同IE版本应用不同的样式。

IE下专属CSS：

复制代码代码如下:

<![if !IE]> 

<link rel="stylesheet" type="text/css" href="NOT-IE.css" /> 

<![endif]> 

IE 6 ONLY:

复制代码代码如下:

<!--[if IE 6]> 

<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" /> 

<![endif]--> 

IE 5 ONLY:

复制代码代码如下:

<!--[if IE 5]> 

<link rel="stylesheet" type="text/css" href="IE-5-SPECIFIC.css" /> 

<![endif]--> 

IE 5.5 ONLY:

复制代码代码如下:

<!--[if IE 5.5000]> 

<link rel="stylesheet" type="text/css" href="IE-55-SPECIFIC.css" /> 

<![endif]--> 

IE6或更低:

复制代码代码如下:

<!--[if lte IE 7]> 

<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" /> 

<![endif]--> 

非IE:

复制代码代码如下:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="REAL-STYLESHET.css" />

<![endif]>

各浏览器CSS hack兼容表：

	IE6	IE7	IE8	Firefox	Chrome	Safari
!important		Y		Y
_	Y
*	Y	Y
*+		Y
\9	Y	Y	Y
\0			Y
nth-of-type(1)					Y	Y

代码示例：

#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}