CSS hack 汇总
2017-08-17 14:33
232 查看
因为平时用到的地方也挺多的,就做了篇汇总的文章,将自己用到的和查到的CSS hack的写法整理一下,也方便自己查看。如果能帮到其他需要的人,就更好啦,如果有错的和不全的地方,也欢迎朋友批评指正~
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
另外还有一种,就是!important,用法:.cssname{background:red!important;},除了IE6,其他所有浏览器都会生效且优先级高。
CSS hack 类内属性前缀法
标记 | 示例 | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 |
_ | _background-color: green; | Y | N | N | N | N | N |
* | *background-color: black; | Y | Y | N | N | N | N |
+ | +background-color: yellow; | Y | Y | N | N | N | N |
\9 | background-color: gray\9; | Y | Y | Y | Y | Y | N |
*+ | *+background-color: pink; | N | Y | N | N | N | N |
\0 | background-color: purple\0; | N | N | Y | Y | Y | Y |
\9\0 | background-color: orange\9\0; | N | N | N | Y | Y | N |
CSS hack 选择器前缀法
示例 | IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Firefox | Chrome | Safari | Opera |
@media screen\9{...} | Y | Y | N | N | N | N | N | N | N | N |
@media \0screen {body { background: red; }} | N | N | Y | N | N | N | N | N | N | N |
@media \0screen\,screen\9{body { background: blue; }} | Y | Y | Y | N | N | N | N | N | N | N |
@media screen\0 {body { background: green; }} | N | N | Y | Y | Y | N | N | N | N | N |
@media screen and (min-width:0\0) {body { background: gray; }} | N | N | N | Y | Y | N | N | N | N | N |
@-moz-document url-prefix(){.csshack{background-color:#00ff00;}} | N | N | N | N | N | N | Y | N | N | N |
@media screen and (-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}} | N | N | N | N | N | N | N | Y | Y | N |
@media all and (min-width: 0px) {.csshack {background-color: #f1ee18;}} | N | N | N | N | N | N | Y | Y | Y | Y |
@media all and (min-width: 0px) {.csshack {background-color: #4cac70\0;}} | N | N | N | N | N | N | N | N | N | Y |
html条件注释法
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
另外还有一种,就是!important,用法:.cssname{background:red!important;},除了IE6,其他所有浏览器都会生效且优先级高。
相关文章推荐
- CSS Hack 汇总快查,兼容不容浏览器
- CSS Hack 汇总快查
- CSS HACK汇总快查
- CSS Hack 汇总快查
- CSS Hack 汇总快查
- CSS Hack汇总快查
- CSS Hack 汇总快查
- css hack 用法汇总
- CSS Hack汇总快查(CSS兼容代码演示)
- css HACK 汇总
- [转]CSS Hack汇总快查
- CSS hack 汇总
- CSS Hack 汇总快查
- CSS Hack汇总快查(CSS兼容代码演示)
- CSS Hack 汇总快查
- CSS Hack 汇总快查
- CSS Hack 汇总快查
- CSS hack 汇总
- CSS Hack汇总快查(CSS兼容代码演示)
- CSS Hack 汇总快查