您的位置:首页 > Web前端 > CSS

CSS hack 汇总

2017-08-17 14:33 232 查看
因为平时用到的地方也挺多的,就做了篇汇总的文章,将自己用到的和查到的CSS hack的写法整理一下,也方便自己查看。如果能帮到其他需要的人,就更好啦,如果有错的和不全的地方,也欢迎朋友批评指正~

CSS hack 类内属性前缀法

标记示例IE6IE7IE8IE9IE10IE11
__background-color: green;YNNNNN
**background-color: black;YYNNNN
++background-color: yellow;YYNNNN
\9background-color: gray\9;YYYYYN
*+*+background-color: pink;NYNNNN
\0background-color: purple\0;NNYYYY
\9\0background-color: orange\9\0;NNNYYN


CSS hack 选择器前缀法

示例IE6IE7IE8IE9IE10IE11FirefoxChromeSafariOpera
@media screen\9{...}YYNNNNNNNN
@media \0screen {body { background: red; }}NNYNNNNNNN
@media \0screen\,screen\9{body { background: blue; }}YYYNNNNNNN
@media screen\0 {body { background: green; }}NNYYYNNNNN
@media screen and (min-width:0\0) {body { background: gray; }}NNNYYNNNNN
@-moz-document url-prefix(){.csshack{background-color:#00ff00;}}NNNNNNYNNN
@media screen and (-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}}NNNNNNNYYN
@media all and (min-width: 0px) {.csshack {background-color: #f1ee18;}}NNNNNNYYYY
@media all and (min-width: 0px) {.csshack {background-color: #4cac70\0;}}NNNNNNNNNY


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,其他所有浏览器都会生效且优先级高。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: