笔者在工作实践中发现当需要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. vsCode 代码不高亮显示的问题

    安装Vetur插件 1.点击左侧菜单的扩展-->搜索Vetur-->点击安装-->安装完成重启vsCode  --->

  2. 2017-2018-2 20155309南皓芯 Exp4 恶意代码分析

    实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 答:我会使用sysmon工具来进行监控 ...

  3. Dapper官方库 在guid和string互转的问题

    之前在和老何谈论他的开源项目Util中使用MySql的过程中发现了官方dapper在转换guid到string时候的一个错误 Error parsing column 0 (ID=6c2adb93-d ...

  4. 记一次Nginx+Keepalived高可用故障转移

    Master端:192.168.2.156 ! Configuration File for keepalived global_defs { notification_email { acassen ...

  5. laravle框架报错Malformed UTF-8 characters, possibly incorrectly encoded

    原因使用了redis, 没有配置 复制了Malformed UTF-8 characters, possibly incorrectly encoded百度了一下. 一直没找到原因 后来看到https ...

  6. django——简介

    1.django的介绍 Django是一个开放源代码的Web应用框架,由Python写成.采用了MVT的软件设计模式,即模型Model,视图View和模板Template.它最初是被开发来用于管理劳伦 ...

  7. 小甲鱼Python第二十一讲课后习题

    测试题: 0.  递归在编程上的形式是如何表现的呢? 在编程上,递归表现为函数调用本身这么一个行为. 1.  递归必须满足哪两个基本条件? 一.        函数调用自身二.        设置了正 ...

  8. Tips_一级菜单栏实现

    1.纵向 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. VSCode+Xdebug断点调试PHP(全攻略)

    一直都想把php断电调试记录下来,由于拖延症极其严重导致现在才写. 好了,刚去猛喝了几碗心灵鸡汤,趁着这股劲把"Visual Studio Code如何使用XDebug进行php断点调试&q ...

  10. [LeetCode] Binary Tree Pruning 二叉树修剪

    We are given the head node root of a binary tree, where additionally every node's value is either a ...