罗锐原数据分享

本实例请按顺序写

1.IE各个版本

div{
    background-color: #CC00FF;        /*所有浏览器都会显示为紫色*/
    background-color: #FF00FF\\9;       /*所有IE*/  
    background-color: #FF0000\\0;       /*IE8 IE9*/
    *background-color: #0066FF;        /*IE6 IE7*/            
    _background-color: #009933;        /*IE6*/
}

2.Opera

@media screen and (min-width:0){   
    div {background-color:black\\0;}  /*opera*/  
}   

3.IE9,IE10

@media screen and (min-width:0) {   
    div { background-color:purple\\9; }/*IE9/IE10  */  
}  

4.IE10

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {   
   div { background-color:green; } /* IE10+ 此写法可以适配到高对比度和默认模式，故可覆盖所有ie10的模式 */  
}  

5.Firefox

@-moz-document url-prefix() {
	div{
		background: #00ff00;/*firefox浏览器识别*/
	}
}

6.Chrome和Safari

@media screen and (-webkit-min-device-pixel-ratio:0){
	div{
		background: #804040; /*safari,chrome浏览器识别*/
	}
}

CSS3区分

动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

过渡

div
{
transition: width 2s;
-moz-transition: width 2s;	/* Firefox 4 */
-webkit-transition: width 2s;	/* Safari 和 Chrome */
-o-transition: width 2s;	/* Opera */
}

转换

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}