条件注释判断浏览器
!: [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.
除IE外都可识别
所有的IE可识别
仅IE6可识别
IE6以及IE6以下版本可识别
IE6以及IE6以上版本可识别
仅IE7可识别
IE7以及IE7以下版本可识别
IE7以及IE7以上版本可识别
仅IE8可识别
仅IE9可识别
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现在用的解析网页的模式,开起机关是在
X-UA-Compatible是IE8的一个专有属性
在X-UA-Compatible中可用的方法有:
其中最后一行是永远以最新的IE版本模式来显示网页的。
另外加上
而使用,Emulate模式后则更重视
建议使用下面的X-UA-Compatible标签:
IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame。
Google Chrome Frame是Google推出的一款免费的Internet Explorer专用插件。使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式浏览网页
手机扫一扫
移动阅读更方便
你可能感兴趣的文章