CSS IE Hack
条件注释判断浏览器
!: [if !IE],The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression.
lt: [if lt IE 5.5],The less-than operator. Returns true if the first argument is less than the second argument.
lte: [if lte IE 6],The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument.
gt: [if gt IE 5],The greater-than operator. Returns true if the first argument is greater than the second argument.
gte:[if gte IE 7],The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument.
():[if !(IE 7)],Subexpression operators. Used in conjunction with boolean operators to create more complex expressions.
&:[if (gt IE 5)&(lt IE 7)],The AND operator. Returns true if all subexpressions evaluate to true
|:[if (IE 6)|(IE 7)],The OR operator. Returns true if any of the subexpressions evaluates to true.
<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>
<!–[if IE 7]> 仅IE7可识别 <![endif]–>
<!–[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]–>
<!–[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]–>
<!–[if IE 8]> 仅IE8可识别 <![endif]–>
<!–[if IE 9]> 仅IE9可识别 <![endif]–>
CSS3 浏览器私有属性前缀
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari浏览器私有属性
-o代表opera浏览器私有属性
.box {
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
-o-box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
box-shadow: 0 2px 3px rgba(0, 0, 0, .1);
}
.round {
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
===== IE =====
supprot: \9
===== IE6 =====
supprot: * _
===== IE7 =====
support: * +
===== IE8 =====
support: \0
===== IE9,IE10 =====
support: \0 \9\0
selector{
/*all*/
background-color:#0ff\0;/* ie 8/9 */
/* ie9+ */
*background-color:#00f;/*IE6, ie7*/
_/*ie6*/
background-color//:#090;/*非IE*/
/*所有ie*/
}
* html #1 { color: #666; } /* IE6, IE7 */
*+html #1 { color: #999; } /* IE7 */
#tip {
background:blue;/*Firefox背景变蓝色*/
background:red\9;/*IE8, IE9, IE10 背景变红色*/
*background:black;/*IE7背景变黑色*/
_background:orange;/*IE6背景变橘色*/
}
@media all and (min-width:0) {
.test{color:red\9; }/* IE9,IE10 */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.test { color: green; } /* IE10+ */
}
.test { color:#963\9; } /* 以前IE9, IE10支持, 优先级高于@media, 优先级太高, 尽量少用 */
#tip{
background:blue;/*Firefox背景变蓝色*/
*background:green!important;/*IE7背景变绿色*/
*background:orange;/*IE6背景变橘色, 此时IE6不识别important*/
}
微软在IE8提供三种解析页面的模式
IE8StandardModes：默认的最标准的模式，严格按照W3C相关规定
IE7StandardsModes：IE7StandardsModes：IE7现在用的解析网页的模式，开起机关是在<head>中加入<meta http-equiv=”X-UA-Compatible” content=”IE=7″>
QuirksModes：IE5用的解析网页的模式，开起机关是删除HTML顶部的DOCTYPE声明
X-UA-Compatible是IE8的一个专有<meta>属性
在X-UA-Compatible中可用的方法有：
<meta http-equiv=”X-UA-Compatible” content=”IE=5″ >
<meta http-equiv=”X-UA-Compatible” content=”IE=7″ >
<meta http-equiv=”X-UA-Compatible” content=”IE=8″ >
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” >
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ >
<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE8″ >
而使用，Emulate模式后则更重视<!DOCTYPE>
建议使用下面的X-UA-Compatible标签：
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame。
Google Chrome Frame是Google推出的一款免费的Internet Explorer专用插件。使用此插件，用户可以通过Internet Explorer的用户界面，以Chrome内核的渲染方式浏览网页
