流行浏览器内核分类及不同版本的样式区别

2020-05-06 08:57:28易采站长站整理

! :就是不等于的意思,跟javascript里的不等于判断符相同

三、IE浏览器几种版本的样式区别
因为CSS3在IE9下是可以正常渲染,但是在IE8及以下版本不支持,此时我们又想让IE8及以下浏览器能够实现同样的效果。


“9″ 只在IE6/IE7/IE8/IE9/IE10下生效
“” 只在 IE8/IE9/IE10下生效
“9” 只在IE9/IE10下生效

如果只需要针对IE8的CSS,可先使用在IE8/IE9/IE10生效的“,再用仅在IE9/IE10生效的“9”覆盖之前的样式。
例如:


selector{
color:#000;color:#F00; /* only for IE8&IE9&IE10 */
color:#0009;    /* only for IE9&IE10 */
}

这样就能在IE8中的颜色显示为:#F00
下面是IE5~IE9,Opera 9.5-9.6/FF 3.51-FF4,Safari,Google Chrome,Opera9.2,FF2/FF3.0/K-Meleon的样式


#example{
background:#036;    /*Moz (& All browsers FF2/FF3.0/K-Meleon) 蓝色(#036)*/
_background:#F00;    /*IE5 (& IE5.5/IE6) 红色(#F00)*/
/background:#630;  /*IE8 beta1 褐色(#630)*/
background:#09F;    /*IE8/IE9 */
background:#09F/;   /*IE8 only 蓝色(#09F)*/
}
:root #example { background:#963 }    /*IE9 only 咖啡色(#963)*/
#example{
*background:#f60;   /*IE7 (& IE5.5/IE6) 橘色(#f60)*/
_background:#000;   /*IE6 (& IE5.5) 黑色(#000)*/
_background:#390;   /*IE5.5 绿色(#390)*/
}
@media all and (min-width:0){   /*webkit and opera */
#example{background:#f06;} /*Opera 9.5-9.6/FF 3.51-FF4, 粉色(#f06)*/
}
@media screen and (-webkit-min-device-pixel-ratio:0){
#example{background:#609;} /*webkit (& Safari,Google Chrome,Opera9.2, 紫色(#609)*/
}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ #example{} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { #example{} }
/* firefox */
@-moz-document url-prefix(){ #example{} }