Hack知多少
twocode

    在DIV+CSS搭建页面时,为了达到最好的效果,不得不做到最大程度上的兼容各个浏览器,但是综合考虑有些小众的给予取舍。做浏览器的兼容性,就引出了CSS Hack的概念:

    由于不同的浏览器对CSS的支持及解析结果不一样,和CSS中的优先级的关系,为达到同样的页面效果,不同的浏览器需要来写不同的CSS。

    第一印象可能是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有效

    偶尔也要给Chrome FF Opera等做一下:

    针对Chrome和Safari等Webkit核心浏览器的CSS hack代码:

    @media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} }

    针对Webkit核心浏览器和Opera的写法:

    *Webkit and Opera*/ @media all and (min-width:0px){ .font1 {color:red;} }

    针对Opera浏览器的写法:

    /*Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }

    针对Firefox浏览器的写法:

    /*Firefox*/ @-moz-document url-prefix() { .font1 {color:red} }

    目前为止,我们是规则的遵守着,相对于制定者而言!

网友评论已关闭