首页 > 代码库 > CSS3前缀

CSS3前缀

2024-07-12 14:10:02   226人阅读

   我们经常会遇到写的有些css3属性会在不同的浏览器下呈现不兼容的情况，那是因为浏览器内核不同而导致的兼容性问题。

   首先我们需要先了解一下目前的几种现代浏览器的内核，主流内容主要有Mozilla（熟悉的有Firefox浏览器），WebKit（熟悉的有Chrome，Safari等浏览器），Trident（IE浏览器），

CSS3的前缀是一个浏览器内核常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分，所以浏览器在没有支持标准的CSS3之前都会有自己的方法，就是加前缀：
 常用的css前缀有

  -webkit    /*Chrome/Safari*/
  -moz   /*Firefox*/
  -ms    /*IE*/


当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候，就不需要前缀了。
目前常用的前缀属性：

1.省略

   -o-text-overflow: ellipsis;  
   text-overflow:ellipsis;  
   overflow:hidden;  
   white-space:nowrap; 

 

  2.变型转换

-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg); /*为nothing*/

    Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

    Chrome 和 Safari 需要前缀 -webkit-。

    Internet Explorer 9 需要前缀 -ms-。

 

3.渐变

background: -webkit-gradient(linear,00,0100%, from(#eee), to(#aaa));/** Chrome Safari **/

background: -moz-linear-gradient(top,#eee,#aaa);/** FireFox **/

background: -o-linear-gradient(top,#eee,#aaa); /** Opear **/

background: -ms-linear-gradient(#eeeeee0%,#aaaaaa100%); /** IE9 IE10 **/

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#eeeeee‘,endColorstr=‘#aaaaaa‘,grandientType=1);/** IE7 **/

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#eeeeee‘,endColorstr=‘#aaaaaa‘,grandientType=1);/** IE8 **/

 
















 


 






























        

            
                
                  
                
                

                    联系

                    我们