irpas技术客

HTML css——浏览器兼容性_coising

irpas 1198

浏览器兼容性 问题产生原因

市场竞争 标准版本的变化

厂商前缀 市场竞争,标准没有正式发布标准仍在讨论,厂商希望先支持

比如 box-sizing. 谷歌旧版浏览器中使用-webkit-box-sizing:border-box

IE : -ms- Chrome Safari: -webkit- opera:-o- firefox: -moz-

浏览器在处理样式或元素时,使用如下方式: 当遇到无法识别的代码,直接略过.

实际上,开发中使用自定义滚动条,往往使用div+css+js实现

css hack

根据不同浏览器(主要针对ie),设置不同样式和元素

样式

ie中,css的特殊符号:

*属性,兼容IE5 IE6 IE7_属性,兼容IE5~IE6属性值\9,兼容IE5~IE11属性值\0 兼容IE8~IE11属性值\9\0,兼容IE9~IE10

IE5~7的外边距bug,浮动元素的左外边距翻倍

条件判断 渐进增强 和 优雅降级

两种解决兼容性问题的思路,会影响代码的书写风格

渐进增强:先适应大部分浏览器,然后针对新版本浏览器加入新的样式 书写代码时,先尽量避免书写兼容性问题的代码,完成之后,再逐步加入新标准中的代码

优雅降级: 先制作完整的功能,然后针对低版本浏览器进行特殊处理

书写代码时,先不用特别在意兼容性,完成整个功能之后,再针对低版本浏览器处理样式

caniuse

查找css兼容性

caniuse.com


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。

标签: #HTML #css浏览器兼容性 #boxsizing #msChrome #Safari