界别IE6、IE7、IE8及标准浏览器——条件注释<html>
日期：2014-05-17 浏览次数：20749 次
区分IE6、IE7、IE8及标准浏览器——条件注释<html>
IE6, IE7, Firefox, Opera , Safari 的 CSS Hacks
ie6将元素悬停
ie6 png透明兼容
IE系列:
div { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
div { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
div { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE6 识别.
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
IE的if条件Hack
<!–[if IE]>Only IE <![endif]–> \\所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–> \\只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–> \\IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–> \\仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>\\ IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>\\ 仅IE7可识别
Firefox:
*:lang(lang) div { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.
div, x:-moz-any-link { property:value; } 目前只有Firefox可以识别.
Safari:
div:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.
Opera:
@media all and (min-width: 0px){ div { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.
由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题，好在大部分问题已经有了足够的总结和途径。废话不多说，下面是一些方法区分浏览器的方法和我的看法。
主要途径CSS Hack
直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为
#content{ background:red; /* 所有浏览器 */ background:orange\9; /* 所有IE浏览器 */ *background:yellow; /* IE7和IE6 */ +background:green; /* IE7 */ _background:blue; /* IE6 */ }
还有一些hack不太实用，就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证，代码阅读时会很奇怪。
条件注释CSS文件
条件注释是写在html里的只会被IE识别的代码，一般在<head>区域通过不同的条件注释导入不同的CSS，不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”：
<!--[if IE]> <link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /> <![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /> <![endif]-->
由于IE8下CSS问题较少，一般只需要为IE6、7写一点修正代码。如果需要，可以在ie.css里用CSS Hack对IE6/7进行差异处理。
<!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]-->
条件注释CSS文件的缺点是会增加至少1次http请求，影响渲染速度，而且维护时不够方便。
条件注释<html>
条件注释<html>跟上面的方法原理一样，只不过这里是给<html>注释不同的class。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
这样在CSS中使用下面的代码即可区分版本
#content{background:red;} .ie9 #content{background:orange;} .ie8 #content{background:yellow;} .ie7 #content{background:green;} .ie6 #content{background:blue;}
你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方
IE6, IE7, Firefox, Opera , Safari 的 CSS Hacks
ie6将元素悬停
.ie6 {
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat')
? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight-20)
: document.body.scrollTop +(document.body.clientHeight-this.clientHeight-20)); /*底端*/
top: expression(eval(document.documentElement.scrollTop));/*顶端*/
}
ie6 png透明兼容
//除ie6
.face1Bg{background:url(images/1.png) no-repeat !important;}
//兼容ie6
.face1Bg{*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src="images/1.png") !important;*background:none !important;}
IE系列:
div { +property:value; } 在属性名前加上加号”+”,这个Hack只有IE系列可以识别.
div { *property:value; } 在属性名前加上星号”*”,这个Hack只有IE系列可以识别.
div { _property:value; } 在属性名前加上下划线”_”,这个Hack只有IE6 识别.
background-color:red\0; /* ie 8/9*/
background-color:blue\9\0; /* ie 9*/
IE的if条件Hack
<!–[if IE]>Only IE <![endif]–> \\所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–> \\只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–> \\IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–> \\仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>\\ IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>\\ 仅IE7可识别
Firefox:
*:lang(lang) div { property:value !important; } 用伪类lang(语言)再加上!important进行定义的话,目前只有Firefox可以识别.
div, x:-moz-any-link { property:value; } 目前只有Firefox可以识别.
Safari:
div:empty { property:value !important; } 用伪类empty再加上!important进行定义的话,目前只有Safari可以识别.
Opera:
@media all and (min-width: 0px){ div { property:value; } } 利用特殊继承法进行定义的话,目前只有Opera可以识别.
由于万恶的IE（尤其指IE6和IE7），我们在页面重构时不免要对其进行各种bug修复及差异化处理。在标准浏览器[1]中可实现的效果在IE里却有各种离奇问题，例如IE6、IE7不能良好应对的inline-block和.clearfix问题，好在大部分问题已经有了足够的总结和途径。废话不多说，下面是一些方法区分浏览器的方法和我的看法。
主要途径CSS Hack
直接在CSS文件中写CSS Hack是非常直观的区分方法。区分不同IE版本的hack代码为
#content{ background:red; /* 所有浏览器 */ background:orange\9; /* 所有IE浏览器 */ *background:yellow; /* IE7和IE6 */ +background:green; /* IE7 */ _background:blue; /* IE6 */ }
还有一些hack不太实用，就不一一列举了。
CSS Hack的缺点是CSS文件无法通过W3C验证，代码阅读时会很奇怪。
条件注释CSS文件
条件注释是写在html里的只会被IE识别的代码，一般在<head>区域通过不同的条件注释导入不同的CSS，不同的IE浏览器会引用不同的CSS。下面的4段注释依次表示"在IE下使用"、“低于IE8时使用”、“IE7时使用”、“IE6时使用”：
<!--[if IE]> <link rel="stylesheet" href="/ie-all.css" type="text/css" media="screen" /> <![endif]--> <!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" href="/ie7.css" type="text/css" media="screen" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" href="/ie6.css" type="text/css" media="screen" /> <![endif]-->
由于IE8下CSS问题较少，一般只需要为IE6、7写一点修正代码。如果需要，可以在ie.css里用CSS Hack对IE6/7进行差异处理。
<!--[if lt IE 8]> <link rel="stylesheet" href="/ie.css" type="text/css" media="screen" /> <![endif]-->
条件注释CSS文件的缺点是会增加至少1次http请求，影响渲染速度，而且维护时不够方便。
条件注释<html>
条件注释<html>跟上面的方法原理一样，只不过这里是给<html>注释不同的class。
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]--> <!--[if IE 7 ]> <html class="ie7"> <![endif]--> <!--[if IE 8 ]> <html class="ie8"> <![endif]--> <!--[if IE 9 ]> <html class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
这样在CSS中使用下面的代码即可区分版本
#content{background:red;} .ie9 #content{background:orange;} .ie8 #content{background:yellow;} .ie7 #content{background:green;} .ie6 #content{background:blue;}
你也可以增加诸如.ltie8这样的class来实现更方便的版本分组管理。这个方
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
