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;

    }

 

}