常见的浏览器前缀

有些时候,某些CSS属性还只是最新版的预览版,并未发布成最终的正式版,而大部分浏览器已经为这些属性提供了支持,但这些属性是小部分浏览器专有的;有些时候,有些浏览器为了扩展某方面的功能,它们会选择新增的一些CSS属性,这些自行扩展的CSS属性也是浏览器专属的。为了让这些浏览器识别这些专属属性,CSS规范允许在CSS属性前增加各自的浏览器前缀。

常见的浏览器前缀有:


前缀


组织


示例


说明


-ms-


Microsoft


-ms-interpolation-mode


IE浏览器专属的CSS属性需添加-ms-前缀


-moz-


Mozilla


-moz-read-only


所有基于Gecko引擎的浏览器(如Firefox)专属的CSS属性需添加-moz-前缀


-o-


Opera


-o-text-overflow


Opera浏览器专属的CSS属性需添加-o-前缀


-webkit-


Webkit


-webkit-box-shadow


所有基于Webkit引擎的浏览器(如Chrome、Safari)专属的CSS需添加-webkit-前缀



时间: 2024-10-26 19:05:35

常见的浏览器前缀的相关文章

冰与火之歌:浏览器前缀

以下内容摘自<CSS揭秘>一书 在标准的开发过程中,总是有大大的"第22 条军规"1①挡在面前:标准的工作组需要网页开发者这一端的输入,以确保各项规范可以处理真实的开发需求:但是开发者往往没有兴趣尝试那些在生产环境中还不能使用的东西.当实验性的技术被广泛应用到生产时,工作组就被这些技术早期的.实验性的版本捆住手脚了,因为一旦这些技术有变动,那些已经在用这些技术的网站就挂了.显然,这完全否定了让开发者尝试早期标准的好处. 这些年来,为了解决这个难题,许多方案被提了出来,但都不

常见的浏览器兼容性问题大汇总

常见的浏览器兼容性问题大汇总 1 ie6.0横向margin加倍 产生因素:块属性.float.有横向margin. 解决方法:display:inline: 2 ie6.0下默认有行高 解决方法:overflow:hidden;或font-size:0;或line-height:xx px: 3 在各个浏览器下img有空隙(原因是:回车.) 解决方法:让图片浮动. 4 一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度. 解决方法:a 在子标签最后清浮动{<div

常见的浏览器兼容性问题

浏览器兼容性问题一: 不同浏览器的标签默认的外补丁和内补丁不同(margin和padding) 问题症状:随便写几个标签,不加样式控制的情况下,各自的magin和padding差异较大. 解决方案:css里 *{margin:0;padding:0;} 浏览器兼容性问题二: 块属性标签float后,又有横行的margin情况下,在ie6显示margin比设置的大. 问题症状:常见症状是ie6中后面的一块被顶到下一行 碰到频率:90%(稍微复杂点的页面都会碰到,float布局常见的浏览器兼容问题)

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器

浏览器前缀-----[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform 1s } Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀: a{      -webkit-trans

Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以忘记CSS前缀了,按照最新的W3C标准尽情书写无前缀的CSS,像这样: a { transition: transform 1s } Autoprefixer使用一个浏览器流行度和属性支持度的数据库来给你的CSS添加前缀. a { -webkit-transition: -webkit-transf

转:[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

原文来自于:http://www.cnblogs.com/aNd1coder/archive/2013/08/12/3252690.html Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform

常见的浏览器兼容性问题总结

1.https://blog.csdn.net/zhuwanwanshay/article/details/51882923 (常见的浏览器兼容性问题总结) 2.http://www.jb51.net/article/55193.htm (css与javascript跨浏览器兼容性总结) 3.https://blog.csdn.net/helloxiaoliang/article/details/51362107 (移动页面点击穿透问题解决方案) 4.https://blog.csdn.net/

webpack通过postcss-loader添加浏览器前缀

在webpack中,我们可以很方便的使用autoprefixer来为css3属性添加不同的浏览器前缀. 首先,需要安装autoprefixer不用多说了,其次是安装postcss-loader(npm install --save-dev postcss-loader) 接下来在webpack.config.js文件里添加如下代码(红圈部分): 接下来,在webpack.config.js的同级目录下新建postcss.config.js文件,配置如下: module.exports = { p