css不同浏览器的前缀

2024-11-02

兼容不同浏览器的CSS前缀-webkit-，-ms-，-moz-，-o-

笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分为:-webkit-,-ms-,-moz-,-o- -webkit-:主要兼容的浏览器是:谷歌的Chrome和苹果的Safari浏览器: -ms-:主要兼容的浏览器是:微软的Internet Explorer.Edge浏览器: -moz-:主要兼容的浏览器是:火狐的Firefox浏览器: -o-:主

css里关于浏览器的前缀

今天遇到一个比较坑爹的 -moz-box-sizing: border-box; box-sizing' border-box; 一下子有点懵逼,第一个什么鬼??一查,原来是火狐浏览器的前缀.应该是火狐在这一块可能不兼容才加的吧索性再一查,把其他的也一起记下 -moz firefox浏览器私有属性 -ms IE浏览器私有属性 -webkit chrome.safari私有属性 -o opera私有属性

4. CSS新特性之浏览器私有前缀

1. 浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加 -moz-:代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safari.chrome私有属性 -o-:代表Opera私有属性 /* 对于border-radius提倡写法如下*/ -moz-border-radius: 10px; -webkit-border-radius:10px; -o-border-radius: 10px; border-radius: 1

JS控制CSS3，添加浏览器兼容前缀

不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-trans

CSS属性的私有前缀

在CSS属性能中,我们常常能看到-webkit-,-moz-之类的前缀,这种就叫做浏览器私有前缀,是浏览器对于新CSS属性的一个提前支持.-webkit-是webkit内核的,-moz-是Firefox Gecko内核,moz代表的是Firefox的开发商Mozilla. 为什么要有私有前缀呢?因为制定HTML和CSS标准的组织W3C动作是很慢的.通常,有w3c组织成员提出一个新属性,比如说圆角border-radius,大家都觉得好,但是w3c不会为这个属性制定标准,而是要走很复杂的程序,经过

css hack 浏览器携带自身特有的属性（二）

css hack 浏览器携带自身特有的属性,才是我们真正要解决的css 兼容问题. 这里只是分享思路. 举例子: 1 outline,尤其是一些自带继承特性的属性.这里指的是隐性的inherited.input获取焦点的背景色,外边框,等等. 2 当图片加载失败的时候,Chrome没有多余的样式,火狐浏览器会出现图片加载失败的样式(出现一个小x )这里就不加载图片了,可以自己试一下.严格来说:这里应该是img 加载问题,不是css可以解决的,但是不同的浏览器出现不同的样式. 具体分析

项目期复习总结1：背景图合并，hack，浏览器内核前缀，伪类after before

文件夹: 1.背景图合并和CSS Spirit 2.PS基本快捷键 3.hack技术基本书写,为什么不用? 4.内核前缀 5.伪类afterbefore 1.背景图合并和CSS Spirit 背景图合并在使用时有两种方法: ①一种就是你会PS.能够自己PS实现背景图合并成一张图片.再用background-position实现背景图的定位. ②假设你不会PS.那能够用CSS背景图合并工具,直接选好图片后在线制作生成相相应格式的图片.方便快捷. background的语法: background-

CSS对浏览器的兼容性(IE和Firefox)技巧整理

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不

css不同浏览器兼容性调试 --- 转自: [http://wo.115.com/?ct=detail&id=31733&bid=1018841]

css不同浏览器兼容性调试 IE6.0,IE7.0与Firefox的CSS兼容性问题1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 4.FF: 设置 padding 后, div 会增加 height 和 width,

css样式浏览器的读取顺序

css样式浏览器的读取顺序例: tbody tr td{} 浏览器是先查找td,然后去找td tr,然后去找td tr tbody div p{}和div>p{}的区别 .div p{} 是会查找页面中所有符合条件的p标签.会耗损许多资源. .div>p{}是只会查找该div下的所有符合条件的p标签.比上面的这种方法会更好些.

css选择器浏览器支持情况

css清除浏览器默认样式

css清除浏览器默认样式(代替 *{}) 将代码放入 css 文件,使用 link 引入. /* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, a

css自适应浏览器大小

css自适应浏览器大小 1.屏幕 > 900px :显示3列 2.450px < 屏幕 < 900px :显示2列 3.屏幕 < 450px :显示1列 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&qu

CSS3选择器、低版本解决方案及各浏览器私有前缀

一.基本选择器通配选择器:* 元素选择器:div.p… ID选择器:#id 类选择器:.className 群组选择器:选择器1,选择器2 主流浏览器全部支持二.层次选择器后代选择器: div p a 子选择器:div>p 兄弟选择器:p+ul 通用选择器:p~a 通用选择器和兄弟选择器选中的都是同一层次的兄弟选择器唯一的区别是兄弟选择器选择的是相邻的第一个兄弟,通用选择器选择的是后面所有的兄第子选择器.兄弟选择器.通用选择器 : IE7+支持三.伪类选择器 1.动态伪类选

CSS系列——浏览器默认样式

了解HTML标签在各浏览器当中的默认样式,可以让我们了解,为什么会要写Reset.css,Reset.css当中要怎么写样式最合理.试着思考下面的问题: 为什么会有默认样式? 每个浏览器的默认样式有什么不同? Reset.css具体怎么写,每个浏览器展示的效果才会一致? 默认样式这里说的默认样式其实是每个浏览器自己的默认样式,我们通常使用style或者link的形式应用的样式内容被成为"用户样式". 浏览器加载完一个页面之后的工作流程大概如下:1.转换2.令牌化3.词法分析4.DOM

css自动添加浏览器兼容前缀 autoprefixer设置

Autoprefixer设置: preferences>key Bindings-Users {"keys":["ctrl+alt+x"],"command":"autoprefixer"} Preferences>package setting>package setting>AutoPrefixer>Setting-User { "browsers":["last

【译】巧用CSS变量实现自动前缀

转:https://www.h5jun.com/post/autoprefixing-with-css-variables-lea-verou.html 最近,当我在制作 markapp.io 这个小网站的时候,我想出一个巧妙的技巧用在 CSS 变量上,我们可以天然地使用它们的动态本质.让我们看一下当你想使用一个属性,但是这个属性有不同的版本,一个无前缀的标准版和一个或多个有前缀的版本的情形.在这里我举一个例子,比如我们使用clip-path,目前需要同时使用无前缀的版本和一个-webkit-前

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

正文自动给CSS文件添加不同浏览器的CSS3前缀:Autoprefixer 安装只需兼容主流浏览器正常情况使用:(在书写完的CSS样式文件中,按F1,选择Autoprefixer CSS) 这时候会添加最新需要兼容的css头(PS:现在基本上只考虑Safari和Chrome了) 兼容其他浏览器但是,这往往不是我们需要的,有时候还需要兼容Firefox.Opera和IE,那么可以自定义VSCode的配置项: // autoprefixer配置 "autoprefixer.browsers&

webpack打包css自动添加css3前缀

为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader autoprefixer --save-dev 2.在当前webpack.base.conf.js目录新建一个postcss.config.js文件 module.exports = { plugins: [ require('autoprefixer') ] } 这就是对postCSS一个简单的配置,引

CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果

CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性选择器 ·并集选择器属性选择器 E[att] { sRules }:选择具有att属性的E元素. E[att="val"] { sRules }:选择具有att属性且属性值等于val的E元素. E[att~="val"] { sRules }:选择具有att属性且属性

div+css常见浏览器兼容问题以及解决办法

1.图片下方出现几像素的空白间隙问题说明:这个问题在ie6和ff(火狐)下经常见到,例如 <div><img src=""/></div>这个图片下面会有一条空白间隙,解决方法:给图上一个垂直方向的属性如:vertical-align: top(任意一个就行middle);这个问题从而延伸到,object(视频)和textarea在火狐下也会出现类似的问题,解决方法一样.细心的朋友会发现在第二节ahuing的重置代码里就有这样一个全局定义object

css不同浏览器的前缀

热门专题