CSS浏览器兼容性问题
CSS浏览器兼容性问题
1、浏览器CSS样式初始化
最简单的初始化方法就是:使用通配符(*),重置所有的初始样式。
*{margin: 0;padding: 0;
}
/* 10px=1rem */
html {overflow-y:scroll;font-size:62.5%;
}
a{text-decoration:none;
}
a:hover { text-decoration:none;
}img {border-style: none;
}ul,ol,li{list-style:none;
} select,input,img,select,button{vertical-align:middle;
}
2、浏览器私有属性
常用的前缀有:
-moz代表firefox浏览器私有属性
-ms代表IE浏览器私有属性
-webkit代表chrome、safari私有属性
-o代表opera私有属性
对于私有属性的顺序要注意,把标准写法放到最后,兼容性写法放到前面
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);
3、CSS hack
keywords
if后面跟的条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本
是否:指定是否IE或IE某个版本。关键字:空
大于:选择大于指定版本的IE版本。关键字:gt(greater than)
大于或等于:选择大于或等于指定版本的IE版本。关键字:gte(greater than or equal)
小于:选择小于指定版本的IE版本。关键字:lt(less than)
小于或等于:选择小于或等于指定版本的IE版本。关键字:lte(less than or equal)
非指定版本:选择除指定版本外的所有IE版本。关键字:!
version
IE浏览器版本,如6、7、8
IE10及以上版本已将条件注释特性移除,使用时需注意。
<!--[if IE]><p>你在非IE中将看不到我的身影</p>
<![endif]--><!--[if IE]>
<style>.test{color:red;}
</style>
<![endif]--><!--[if lt IE 9]><script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
这样就不一用这里一个兼容性属性,那里一个兼容性属性啦。
4、自动化插件
Autoprefixer是一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。
//我们编写的代码
div {transform: rotate(30deg);
}//自动补全的代码,具体补全哪些由要兼容的浏览器版本决定,可以自行设置div {-ms-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg);
目前webpack、gulp、grunt都有相应的插件,可以自动生成兼容性代码
。
webpack详细使用方法请看这里:webpack笔记
CSS浏览器兼容性问题相关推荐
- CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题 比如 border: 0xp solid #fff;两个浏 ...
- CSS浏览器兼容性与解决方法
一.什么是浏览器兼容性问题? 所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况:而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的. 认识浏览器内核 ...
- CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化、浏览器私有属性,CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
- 浏览器与css的兼容,CSS浏览器兼容性与解决
一.超链接访问后hover样式不出现 1.现象描述: 同时设置了a:visited和a:hover样式,但一旦超链接点击过后,hover的样式就不再出现了. 2.解决方法: 调整样式顺序为先a:vis ...
- html网页自动兼容模式,解决CSS浏览器兼容性问题的4种方案
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配.兼容性问题. 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frire ...
- HTML css——浏览器兼容性
浏览器兼容性 问题产生原因 市场竞争 标准版本的变化 厂商前缀 市场竞争,标准没有正式发布 标准仍在讨论,厂商希望先支持 比如 box-sizing. 谷歌旧版浏览器中使用-webkit-box-si ...
- css浏览器兼容性的问题
1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height ...
- Css 浏览器兼容性及其其他常见问题
2019独角兽企业重金招聘Python工程师标准>>> CSS IE10~11 透明滚动条 透明滚动条不占空间,显示时会覆盖内容 //--如下样式使滚动条变为普通样式 body {/ ...
- CSS浏览器兼容性----Hack
CSS Hack大致有3种表现形式,CSS类内部Hack.选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器. 类内部Hack:比如 IE6能识别下划线&qu ...
最新文章
- TabHost的使用(二):实现TabHost.TabContentFactory接口
- 【TarsosDSP】TarsosDSP 简介 ( TarsosDSP 功能 | 相关链接 | 源码和相关资源收集 | TarsosDSP 示例应用 | TarsosDSP 源码路径解析 )
- opencv-3.3安装记录-ubuntu 14.04
- 数据分析 超市条码_一样的品牌哪里买?9.9元都不到的品牌牛排、火锅原来在条码商城...
- MaBatis(5)输入/输出映射
- 【快乐水题】520. 检测大写字母
- 如何利用云原生技术构建现代化应用?
- 新内容、新交互、新增长:视频云为短视频及电商直播行业高效赋能
- vba里面的日期数据转换异常(Format error)(使用IsDate方法部分解决)
- REVERSE-PRACTICE-BUUCTF-6
- 用python机器学习实现新闻关键词的抽取,你学会了吗?
- 互联网之父确诊新冠,一代传奇:任谷歌副总裁、NASA 访问科学家
- Flex里[Exclude]标签的作用:对外忽略/隐藏内部某对象
- 伴随矩阵,可逆矩阵相关思路分析之一
- python内容限制_Python --类,实例和访问限制
- 003自动装配歧义性解决
- eclipse安卓开发环境配置全流程
- 顺序表的基本操作代码实现
- 网页版bpc电波对时_BPC电波对时助手下载-BPC电波对时appv1.04 最新版-腾牛安卓网...
- 计算机中丢失msvcr100.dll怎么办,Win7计算机中Msvcr100.dll丢失的解决方法
热门文章
- 光纤收发器让网络布线变的更方便
- [渝粤教育] 西南科技大学 经济数学1 在线考试复习资料
- 【渝粤题库】陕西师范大学229011 商业银行信贷管理Ⅰ 作业(高起专)
- python将html存为pdf_用Python将HTML转为PDF。
- java编程彩球滑梯作弊_课内资源 - 基于C++的学生成绩管理系统
- php生成网页按钮,JavaScript实现自动生成网页元素功能(按钮、文本等)_javascript技巧...
- mysql mydumper_系统运维|Mydumper-MySQL数据库备份工具
- wifi定位算法android,WIFI定位算法
- java足球游戏毕业设计,java毕业设计_springboot框架的校园足球管理平台
- 循环自相关函数和谱相关密度(二)——实信号、复信号模型下的BPSK信号循环谱推导