笔者在工作实践中发现当需要CSS兼容不同的浏览器时，需要在CSS样式前加上不同的前缀，从而使其他浏览器也能够达到相同的页面效果。

那么我们怎么去加上这些前缀呢？我们一起带着疑问来进行学习：

1、前缀分为：-webkit-，-ms-，-moz-，-o-

-webkit-：主要兼容的浏览器是：谷歌的Chrome和苹果的Safari浏览器；

-ms-：主要兼容的浏览器是：微软的Internet Explorer、Edge浏览器；

-moz-：主要兼容的浏览器是：火狐的Firefox浏览器；

-o-：主要兼容的浏览器是：欧朋的Opera浏览器。

兼容不同浏览器的CSS前缀-webkit-，-ms-，-moz-，-o-的更多相关文章

  1. 兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class {  filter:alpha(opacity=50);  -moz-opacity:0.5; ...

  2. （转）兼容主流浏览器的CSS透明代码

    透明往往能产生不错的网页视觉效果下面是兼容主流浏览器的CSS透明代码.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; - ...

  3. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  4. js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)

    /** *浏览器兼容写法封装 */ let elementStyle = document.createElement('div').style let vendor = (() => { le ...

  5. 兼容主流浏览器的css渐变色

    网页中的渐变色区域,渐变色背景,一般都是通过ps图片方法来实现,但是图片放得多了会影响网页的打开速度,本文介绍的就是用纯 CSS 实现 IE .Firefox.Chrome 和 和Safari都支持的 ...

  6. 网站哀悼变灰代码集合 兼容所有浏览器的CSS变暗代码

    下面这些CSS代码可以把网站的网页变为黑白,只需将代码加到CSS文件或网页最顶端就可以实现素装.建议全国站长动起来.为遇难的同胞哀悼. 如何将网站变成灰色调呢,网站变灰色方法是什么?有哪些?为了方便大 ...

  7. 兼容不同浏览器的 CSS Hack 写法

    所谓 CSS Hack,是指在 CSS 代码中嵌入诸如 *,*html  等代码,方便于独立控制某种浏览器的具体样式.比如有些 CSS Hack 只能被 IE6 或 IE7 识别,而 Firefox ...

  8. JavaScript判断各浏览器CSS前缀的两种方式

    不管浏览器更新的多快,号称多么支持标准.厂商不同,他们之间还是有很多差异.我们需要区分出这些差异,针对不同的浏览器做不同的处理. 比如 CSS 前缀,IE 的是 "-ms-",旧版 ...

  9. 滚动条--nicescroll插件（兼容各种浏览器，低至IE5）

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. Felx布局基础教程

    网页布局即layout是css的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  2. 微信支付现金红包接口应用实例代码说明和DEMO详解，适合用来做微信红包营销活动、吸粉利器

      本文详细介绍微信红包开发的接口,商户调用接口时,通过指定发送对象以及发送金额的方式发放红包,领取到红包后,用户的资金直接进入微信零钱.后面带有具体调用php实例   总结一下:需要注意的是PEM秘 ...

  3. fft,ntt

    在被两题卡了常数之后,花了很久优化了自己的模板 现在的一般来说任意模数求逆1s跑3e5,exp跑1e5是没啥问题的(自己电脑,可能比luogu慢一倍) 当模数是$998244353,100453580 ...

  4. Python——文件读取

    我们经常需要从文件中读取数据,因此学会文件的读取很重要,下面来介绍一下文件的读取工作:     1.读取整个文件     pi_digits.text 3.1415926535 8979323846 ...

  5. aop切入mapper接口

    ***************************************分割线****************************************************** 参考: ...

  6. 为什么Dotnet Core的DI默认是在控制器中注入

    转载请注明出处: https://www.cnblogs.com/zhiyong-ITNote/ DI的大概过程抽象成如下:接口对象 <-- 实现对象 <-- 抽象对象 在抽象对象中引入接 ...

  7. 一文搞定scrapy爬取众多知名技术博客文章保存到本地数据库，包含：cnblog、csdn、51cto、itpub、jobbole、oschina等

    本文旨在通过爬取一系列博客网站技术文章的实践,介绍一下scrapy这个python语言中强大的整站爬虫框架的使用.各位童鞋可不要用来干坏事哦,这些技术博客平台也是为了让我们大家更方便的交流.学习.提高 ...

  8. vue中Prop父子传值方法

    在用vue做项目的过程中感觉很好玩,特做下笔记... 父组件中: <template> <div> <fpdx-modal :zbArr="polygonArr ...

  9. [LeetCode] Champagne Tower 香槟塔

    We stack glasses in a pyramid, where the first row has 1 glass, the second row has 2 glasses, and so ...

  10. 6.6 Pandora 实操 - API/SDK

    创建实时仓库 连接日志仓库 点击到工作流查看 通过 Java sdk 打数据 通过 java sdk 对应字段打数据,先打到实时仓库(消息队列),对应再会打到日志仓库(做存储). 代码见 Sequen ...