Maison >interface Web >tutoriel HTML >web开发之浏览器(五)浏览器兼容CSS hack_html/css_WEB-ITnose

web开发之浏览器(五)浏览器兼容CSS hack_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:51:431009parcourir

首先,仅仅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 >

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 >


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 >

Hack应用情境(四)(GOOD)

适用范围:IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome全兼容

实例代码:

/*****************************************

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn