天天看点

CSS HACK

各种各样的浏览器,曾经的CSS HACK现在还能HACK吗?

CSS HACK
chensy 收集了网上一些常见的HACK,在各大浏览器上作了测试,来看看他在 博客上的分享

吧。

HACK主要分为CSS选择器HACK、CSS属性HACK、IE条件注释HACK和JS判断HACK;各有优缺点,不必纠结于某一方式,具体问题具体分析。这里主要记录的是CSS选择器和属性HACK。

以下测试结果是在:Win7 64位系统,默认IE10浏览器,使用IE10下的IE789浏览器模式,使用IE6绿色版浏览器,使用Opera 12.15,使用Firefox 21,Safari 4,Google Chrome 28,进行测试的。如果有什么错误,请指正!

浏览器(加粗表示支持) CSS hack
IE6

_background-color:#38DB24;

IE67

*background-color:#38DB24 ;

+background-color:#38DB24 ;

#background-color:#38DB24;

background-color:#38DB24 !ie;

IE678910

background-color:#38DB24\9;

IE78910&Firefox&Opera&Chrome&Safari

html>body .ie78910-all-hack { background-color: #38DB24 }

IE8910&Firefox&Opera&Chrome&Safari

html>/**/body .ie8910-all-hack { background-color: #38DB24 }

IE8910&Opera

background-color:#38DB24\0;

IE910

:root .ie910-hack { background-color:#38DB24\9; }

background-color:#38DB24\9\0;

IE910&Firefox&Opera&Chrome&Safari

body:nth-of-type(1) .ie910-all-hack {background-color:#38DB24 ;}

@media all and (min-width: 0px) { .ie910-all-2-hack{ background-color:#38DB24 ;} }

@media all and (min-width: 0px) { .ie910-all-3-hack{background-color:#38DB24 ;} }

:root *> .ie910-all-4-hack { background-color:#38DB24 }

IE10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ie10-hack{background-color:#38DB24 ;} }

Firefox

@-moz-document url-prefix() { .firefox-hack{background-color:#38DB24 ;} }

Chrome&Safari

@media screen and (-webkit-min-device-pixel-ratio:0) {.chrome-safari-hack{background-color:#38DB24 ;} }

继续阅读