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

WBOY
Freigeben: 2016-06-24 11:51:43
Original
987 Leute haben es durchsucht

首先,仅仅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有效
Nach dem Login kopieren

再次,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全兼容

实例代码:

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

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage