如果你是一位资深的前端工程师，你可以飘过。如若你总是因为浏览器兼容性问题而苦恼，那么你可以看一下以下整理的内容，并根据DEMO进行测试，或许会有一定的收获。
在所有浏览器中，对标准支持最乱的是IE，更新最慢的也是IE，用户群（国内）最多的仍数IE。泥吗，在IE上做开发完全就是程序员折腾程序员。抱怨还是放一边吧！下面切入正题！
IE中的条件注释可以很容易的检测到早期版本的Windows Internet Explorer。条件注释可以很容易的把IE和其它非IE浏览器区分开来，并且可以针对IE的不同版本来进行书写特定的样式和HTML结构。不过要特别注意：在IE 10+，标准模式下不再支持条件注释（解决方案基于功能检测）。
下面是其中的表达式可以对以下几项（IE版本，操作系统版本）进行判断
项实例作用 ! [if !IE] 非操作。对最后匹配结果进行取反。实例表示非IE浏览器。 lt [if lt IE 5.5] lt是less than的缩写，即判断返回值小于时执行。实例表示在所有版本低于IE 5.5的IE中执行。 lte [if lte IE 6] lte是less than or equal的缩写，即判断返回值要小于或等于时执行。 gt [if gt IE 5] gt是greater than的缩写，即判断返回值要大于时才执行。 gte [if gte IE 7] gte是greater than or equal的缩写，即判断返回值要大于或等于时才执行。 ( ) [if !(IE 7)] 子表达式，用来构建更加复杂的表达式。 & [if (gt IE 5)&(lt IE 7)] 取与操作。对前后两个表达式的值取与。 | [if (IE 6)|(IE 7)] 或操作。对前后两个表达式取或操作。下面就来几个例子：
1、只为IE6指定样式的方法（为IE9以上的版本不可以采用条件注释）
<!--[if IE 6]>
<style type="text/css">
#mine {
width:300px;
height:200px;
}
</style>
<![endif]-->
2、为IE 8、9指定样式
<!--[if (IE 8) | (IE 9)]>
<style type="text/css">
#mine {
width:300px;
height:200px;
}
</style>
<![endif]-->
[if IE 5.5000]<meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"/>，代码就是让所有版本高于7的IE都以IE的模式进行渲染，故就会被判断为IE 7。虽然IE的条件注释语句在某种程序上为我们提供了方便，但是却很难让我们把样式放置到同一个CSS文件中。。。那么下面，我们就来了解一下IE中CSS解释器HACK对各版本的支持情况。（以下表格中的检测结果是基于IE浏览器的标准渲染模式，若有错误，请留言指出，我会立即更正。）
标识IE版本示例 IE 6 IE 7 IE 8 IE 9 IE 10 _ 支持 不支持 不支持 不支持 不支持 {_display:none;} + 支持 支持 不支持 不支持 不支持 {+display:none;} * 支持 支持 不支持 不支持 不支持 {*display:none;} # 支持 支持 不支持 不支持 不支持 {#display:none;} *- 支持 不支持 不支持 不支持 不支持 {*-display:none;} *+ 不支持 支持 不支持 不支持 不支持 {*+display:none;} \0 不支持 不支持 支持 支持 支持 {background-color:red\0;} \0/ 不支持 不支持 支持 不支持 不支持 {background-color:red\0/;} \9 支持 支持 支持 支持 支持 {background-color:red\9;} \9\0 不支持 不支持 支持 支持 支持 {background-color:red\9\0;} \9\0/ 不支持 不支持 支持 不支持 不支持 {background-color:red\9\0/;} -ms- 不支持 不支持 支持 支持 支持 {-ms-transform:rotate(-3deg);}class="alert">注意：以上最后一个-ms-前缀是专门用来针对IE8+浏览器中私用属性，或CSS 3中尚未成为标准的属性前缀。用于HACK中，有时可能不会起作用。比如：-ms-height:100px;
下面是对以上各种IE版本做的CSS HACKS，你可以点击以下的DEMO进行测试（请保证是在标准模式的测试结果），如有错误，请在留言中给出，我会立即修正，以免误导更多的童鞋们。
查看DEMO 下载DEMO在IE浏览器中，除了以上前缀的方式之外，还可以通过选择器的技巧来实现区分浏览器的样式。我们知道，IE是在不断的支持CSS 中的高级选择器，而低版本对于高版本而言，支持的选择器种类也就少些，于是我们就可以利用IE对选择器支持程度的不同而为不同版本指定样式。不仅如些，IE中还有一些选择器的特殊的标识，下面将归在一起，并写出了支持情况。
选择器IE版本示例 IE 6 IE 7 IE 8 IE 9 IE 10 > 不支持 支持 支持 支持 支持 html < body #mine * 支持 不支持 不支持 不支持 不支持 *html #mine *+ 不支持 支持 不支持 不支持 不支持 *+html #mine :root 不支持 不支持 不支持 支持 支持 :root #mine说明：对于以上示例中选择器部分差异，未整理全。另外特别说明一下像*这样的选择器前缀不一定只能放在html的前面，你完全可以这样来用*#mine。
#mine {
background-color:pink; /*针对标准浏览器*/
background-color:#ccc\9; /*针对所有IE，但通过后续代码，此样式中能IE 11/10/9有效*/
bckground-color:yellow\0/; /*IE 8专用HACK*/
*background-color:aliceblue; /*IE 6,7，最终作用于IE 7*/
_background-color:greenyellow; /*IE 6专用样式*/
}
通过以上：你可以看到很难把IE 9/10分别开来，但是方法还是有的（在HTML中作一下文章），代码如下：
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" lang="zh-CN">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" lang="zh-CN">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" lang="zh-CN">
<![endif]-->
<!--[if IE 9]><!-->
<html id="ie9" lang="zh-CN">
<!--<![endif]-->
<head>
<meta charset="UTF-8" />
<title>小天地，大世界</title>
<style type="text/css">
#mine {
width:200px;
height:200px;
border:1px solid blue;
background-color:#ccc;
}
#ie6 #mine {
background-color:red;
}
#ie7 #mine {
background-color:#FFFFFF;
}
#ie8 #mine {
background-color:yellowgreen;
}
#ie9 #mine {
background-color:peru;
}
</style>
</head>
<body>
<div id="mine"></div>
</body>
</html>
一般来讲IE 9+对于CSS标准的支持已经很不错了，只要你的代码符合标准，一般是不会出现什么问题的。所以本文并未对ie 9/10/11的hack作非常深入的研究。
!important来分开IE6（个人感觉这个方法实在不妥，故在以上并未给出）。对于比较符合标准的浏览器中，IE10+可以放进去的。我们肯定是很少或者是没有在其上用过hack，因为没有必要。话不能这么绝对，因为浏览器开发厂商不是长着一个脑袋。所以小小研究一下还是有必要的。下面主要是结合CSS MEDIA QUERIES支持情况的不同，从而为不同浏览器指定样式（如果你对CSS 3 MEDIA QUERIES不了解，你可以参看：CSS 3 Media Queries 学习小结)。
IE 10+的浏览器是支持 @media –ms-hight-contrast媒体查询，同时也是支持-ms-hight-constrast这个属性，故可以通过此来把IE 9－区别开来，代码如下：
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE 10 + 样式 */
}
同理的方法如下：
<script type="text/javascript"> if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) { document.documentElement.className += "ie10 ie11"; } </script>
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* style for Chrome,safari...*/
}
前不久，Opera好像把内核转向webkit了，所以以上代码可能对后来的Opera也是生效的。
doesnotexist:-o-prefocus, #mine1 {
/*style for Opera 12+*/
}
费话少说，直接贴上代码吧！
@-moz-document url-prefix() {
#mine {
/*style for ff*/
}
}
-webkit-、-o-、-ms-），感觉不好，并且在浏览器上也不太好使，所以没有介绍。在文章的最后，也就缀述这些HACK了，还是简洁了当，给个DEMO吧（此DEMO是可以区分IE 6,7,8,9,10、Opera、Chrome。。。）。
查看DEMO 下载DEMO原创文章，转载请注明出处：小天地，大世界[http://www.lyblog.net/]
文章地址：http://www.lyblog.net/?p=342
相关文章
