Loading

CSS区分Chrome和Firefox

CSS区分Chrome和FireFox

描述:由于Chrome和Firefox浏览器内核不同,对CSS解析有差别,因此常会有在两个浏览器中显示效果不同的问题出现,解决办法如下:

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .content .test {
        background: #ff0;
    }
}
/*FireFox*/
@-moz-document url-prefix() {
    .content .test {
        background: #f0f;
    }
}
/*IE9+*/
@media all and (min-width:0) {
    .content .test{
        background: #f009;
    }
}

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .content .test {
        background: #0ff;
    }
}

/*iPhone / mobile webkit */

@media screen and (max-device-width: 480px) {

  .content .test {
       background: #0ff;
    }

}
posted @ 2021-12-06 11:23  顾诚的城  阅读(463)  评论(0编辑  收藏  举报