知方号

知方号

浏览器兼容性 <浏览器css3兼容>

浏览器兼容性 #问题产生原因 #市场竞争标准版本的变化厂商前缀 #

比如: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属性值,兼容IE8~IE11属性值9,兼容IE9~IE10

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

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

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

渐近增强:先适应大部分浏览器,然后针对新版本浏览器加入新的样式

书写代码时,先尽量避免书写有兼容性问题的代码,完成之后,再逐步加入新标准中的代码。

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

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

caniuse #

查找css兼容性

caniuse.com

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。