首先,仅仅IE支持的条件注释语句
除IE外都可识别
例子
这样有效是有效,但是用HTML VALIDATOR里,报错,因为这个不符合XHTML 1.1的规范,
如果把ELSE语句去掉,则正确.
方法:
加载CSS2
其次,各IE浏览器常用前缀(又是IE,我已经无力吐槽了)
*html *前缀只对IE6生效*+html *+前缀只对IE7生效@media screen\9{...}只对IE6/7生效@media \0screen {body { background: red; }}只对IE8有效@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效@media screen\0 {body { background: green; }} 只对IE8/9/10有效@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
再次,CSS特殊字符hack
「\9」、「*」、「_」「!important」
「\9」仅支持所有IE系列
「*」仅IE6,IE7
「_」仅IE6
「!important」仅IE7,firefox等
最后,各种特殊字符Hack实例验证
Hack应用情境(一)
适用范围:IE:6.0,IE7.0,IE8.0之间的兼容
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
/*一个用于展示的class为bb的div标签*/
< div class ="bb"> div >
Hack应用情境(二)
适用范围:IE:6.0,IE7.0,IE8.0,Firefox之间的兼容
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/* 仅firefox 识别 */
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"> div >
Hack应用情境(三)
适用范围:IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容
实例代码:
.bb{
height:32px;
background-color:#f1ee18;/*所有识别*/
background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
.bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
* +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
/*一个用于展示的class为bb的div标签*/
< div class ="bb"> div >
Hack应用情境(四)(GOOD)
适用范围:IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome全兼容
实例代码:
/***************************************** All browsers are compatible with CSS ****** ****************************************/
.bb{height:32px;background-color:#f1ee18;/*All recognitions*/ background-color:#00deff9; /*IE6, 7, 8 recognition* / background-color:#a200ff;/*IE6, 7 recognition*/ _background-color:#1e0bd1/*IE6 recognition*/}
@media screen and (-webkit-min-device-pixel-ratio :0){.bb{background-color:#f1ee18}}{} /* Safari(Chrome) valid*/
@media all and (min-width: 0px){ .bb{background-color:#f1ee18 ;/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70
Attach. Table: