首页 > 编程开发 > CSS    日期:2018-08-19 / 来自互联网 / 浏览

针对Chrome和Safari等Webkit核心浏览器的CSS hack代码

@media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ }

示例:

@media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} }

除此之外,还有专门针对某个浏览器的CSS hack方法,如针对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} }

除了添加CSS hack以外,还应该给每个CSS hack加上注释,这样才能熟记于心,希望大家找到适合自己的方法。

觉得上面的内容有用吗?快来点个赞吧!

点赞() 我要打赏

温馨提示 : 本站内容来自会员投稿以及互联网,所有源码及教程均为作者总结编辑,请大家在使用过程中提前做好备份,以免发生无法预知的错误,源码类教程请勿直接用于生产环境!

 可能感兴趣的文章

1 2 3 4 5