针对IE6\7\8\9\10浏览器的CSS hack大全详解

目前IE内核浏览器仍然是国内主流浏览器，占据着PC浏览器的大部分市场份额，版本从IE6到IE10，所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题。在很多情况下，我们需要专门针对IE写css样式，即针对IE的css hack，下面将详细介绍这些内容：

1、常见的特殊符号的应用：

IE6：

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

IE7：

+selector{property:value;}

IE8：

selector{property:value\0;}

IE6 & IE7：

*selector{property:value;}

IE6 & IE7 & IE8：

selector{property:value\9;}

总结起来，如下：

其中，S表示Standards Mode即标准模式，Q表示Quirks Mode，即兼容模式。

（了解更多Quirks模式、Strict(Standars)模式？）

hack	示例	IE6(S)	IE6(Q)	IE7(S)	IE7(Q)	IE8(S)	IE8(Q)
*	*color	Yes	Yes	Yes	Yes	No	Yes
+	+color	Yes	Yes	Yes	Yes	No	Yes
-	-color	Yes	Yes	No	No	No	No
_	_color	Yes	Yes	No	Yes	No	Yes
#	#color	Yes	Yes	Yes	Yes	No	Yes
\0	color\0	No	No	No	No	Yes	No
\9	color\9	Yes	Yes	Yes	Yes	Yes	Yes
!important	color:blue !important; color:green;	No	No	Yes	No	Yes	No

2、条件注释语句（<!--[if IE]> <![endif]-->）

<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->

lt 表示less than 当前条件版本以下的版本，不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本，并包含当前版本。

lte 表示less than or equal 当前版本以下版本，并包含当前版本。

3、meta声明

由于IE8 可能会将页面按照 IE7 模式进行渲染，针对 多版本IE的现状，通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。

<meta http-equiv="X-UA-Compatible" content="IE=7"> //标准 IE7 模式

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> //兼容 IE7 模式

<meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式

4、其他（/*\**/注释法）

网上也流传着这样一种ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

转自请注明文章转自五月兰博客：http://www.wuyuelan.com/1322

来源：oschina

链接：https://my.oschina.net/u/592877/blog/86928