.. date: 2013/08/10 10:22:30 .. slug: css-hack .. title: CSS HACK .. tags: css .. link: .. comment: True .. description: CSS HACK,浏览器兼容性 越来越多的浏览器出现,曾经的CSS HACK现在还能HACK吗? 不知道,所以我收集了网上一些常用的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,进行测试的。如果有什么错误,请指正! .. TEASER_END .. raw:: html
浏览器(绿色表示当前浏览器支持) | CSS hack |
---|---|
IE6 |
_background-color:#38DB24;
|
IE67 |
*background-color:#38DB24 ;
|
IE67 |
+background-color:#38DB24 ;
|
IE67 |
#background-color:#38DB24;
|
IE67 |
background-color:#38DB24 !ie;
|
IE678910 |
background-color:#38DB24\9;
|
IE78910&Firefox&Opera&Chrome&Safari |
html>body .ie78910-all-hack
|
IE8910&Firefox&Opera&Chrome&Safari |
html>/**/body .ie8910-all-hack
|
IE8910&Opera |
background-color:#38DB24\0;
|
IE910 |
:root .ie910-hack
|
IE910 |
background-color:#38DB24\9\0;
|
IE910&Firefox&Opera&Chrome&Safari |
body:nth-of-type(1) .ie910-all-hack
|
IE910&Firefox&Opera&Chrome&Safari |
@media all and (min-width: 0px)
|
IE910&Firefox&Opera&Chrome&Safari |
@media all and (min-width: 0px)
|
IE910&Firefox&Opera&Chrome&Safari |
:root *> .ie910-all-4-hack
|
IE10 |
@media screen and (-ms-high-contrast: active),
|
Firefox |
@-moz-document url-prefix()
|
Chrome&Safari |
@media screen and (-webkit-min-device-pixel-ratio:0)
|