我们经常会遇到写的有些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 **/





 


												

CSS3前缀的更多相关文章

  1. 第 20 章 CSS3 前缀和 rem

    学习要点: 1.CSS3 前缀 2.长度单位 rem 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 在发展中实行标准化的一些问题,重点探讨 CSS3 中新属性前缀问题和新的单位 rem. 一 ...

  2. (转)css3前缀

    CSS3的前缀是一个浏览器生产商经常使用的一种方式.它暗示该CSS属性或规则尚未成为W3C标准的一部分.看看都有哪些前缀: -webkit(chrome) -moz(firefox) -ms(ie) ...

  3. 第七十七节,CSS3前缀和rem长度单位

    CSS3前缀和rem长度单位 学习要点: 1.CSS3前缀 2.长度单位rem 本章主要探讨HTML5中CSS在发展中实行标准化的一些问题,重点探讨CSS3中新属性前缀问题和新的单位rem. 一 CS ...

  4. 介绍一款自动给添加不同浏览器CSS3前缀的插件~Autoprefixer(附其他前端开发插件)

    正文 自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装 只需兼容主流浏览器 正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时 ...

  5. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  6. 主流浏览器内核,以及CSS3前缀识别码

    现在国内常见的浏览器有:IE.Firefox.QQ浏览器.Safari.Opera.Google Chrome.百度浏览器.搜狗浏览器.猎豹浏览器.360浏览器.UC浏览器.遨游浏览器.世界之窗浏览器 ...

  7. html5--6-24 css3前缀

    html5--6-24 css3前缀 学习要点 掌握css3前缀的使用 CSS3目前很多新增属性尚未被W3C列为标准,对这些暂时未被公布为标准的属性,各家浏览器会在属性前加上前缀词,也将其称之为浏览器 ...

  8. webpack打包css自动添加css3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  9. CSS3前缀自动补全方案和插件

    第一种方法:prefix free,js插件,大小2kb,直接导入,无需任何浏览器兼容前缀 <script src="prefixfree.min.js"></s ...

随机推荐

  1. 关于Windows8.1更新后Sql Server服务消失的处理办法

    前言 微软在17日发布了windows8.1,兴致勃勃地花了半天的时间更新了,不过不知所云的是,在20日又被卸下Windows Store.此为背景. 影响 更新完毕做开发的时候,发现SqlServe ...

  2. CSS的一些思考(一)

    迈入前端行业已经8个多月了,从之前懵懵懂懂到现在的能根据设计图迅速成型页面,自我感觉良好.最近看到张大牛的一篇博客<说说CSS学习中的瓶颈>,突然意识到,自己不就处在快速学习和成长后的一个 ...

  3. 一篇详细的 Mysql Explain 详解

    一.语法 explain < table_name > 例如: explain select * from t3 where id=3952602; 二.explain输出解释 +—-+— ...

  4. CoreData学习-最好的一片文章

    CoreData学习-最好的一片文章 分类: IOS重新上路2014-05-25 18:00 1937人阅读 评论(0) 收藏 举报   目录(?)[+]   写的很好的一篇教程,我什么时候能写出这么 ...

  5. Box.net获5000万美元投资(SAAS博士)

    9月29日,据国外媒体报道,“云”存储服务商Box.net已经从Salesforce等投资者获得新一轮融资5000万美元. Box.net过去的投资者也参与了新一轮的融资.最终,在CRM巨人Sales ...

  6. 【转】ubuntu下安装及设置FTP服务器!!

    原文网址:http://hujizhou.blog.51cto.com/514907/1290915 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律 ...

  7. wikioi1191 数轴染色

    题目描述 Description 在一条数轴上有N个点,分别是1-N.一开始所有的点都被染成黑色.接着 我们进行M次操作,第i次操作将[Li,Ri]这些点染成白色.请输出每个操作执行后 剩余黑色点的个 ...

  8. 原生javascript添加引用js文件

            function addScriptTag(src) {                         var script = document.createElement(&qu ...

  9. 使用WCF实现SOA面向服务编程—— 架构设计

    原文地址:http://www.cnblogs.com/leslies2/archive/2011/03/29/1997889.html SOA本身就是一种面向企业级服务的系统架构,简单来说,SOA就 ...

  10. 3 Sum 解答

    Question Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Fi ...