Hack知多少05-17
在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} }
目前为止,我们是规则的遵守着,相对于制定者而言!
- CSS3中的word-wrap和word-break 2015-05-18
- 网站DIV+CSS布局的优点与缺点 2015-01-14
- Minify小工具的运用----强力压缩CSS和JS文件,加快页面响应 2014-12-10