浏览器兼容性

问题产生原因

市场竞争
标准版本的变化

厂商前缀

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

比如 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

HTML css——浏览器兼容性相关推荐

CSS浏览器兼容性问题详解总结
CSS浏览器兼容性问题详解总结 2009-11-12 11:39 对css缩写的支持问题: 不论是ie 还是ff对css的缩写都有一小点问题比如 border: 0xp solid #fff;两个浏 ...
CSS浏览器兼容性问题
CSS浏览器兼容性问题 1.浏览器CSS样式初始化最简单的初始化方法就是:使用通配符(*),重置所有的初始样式. *{margin: 0;padding: 0; } /* 10px=1rem */ ...
CSS浏览器兼容性与解决方法
一.什么是浏览器兼容性问题? 所谓的浏览器兼容性问题,是指不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况:而造成浏览器兼容问题的根本原因,是浏览器的内核不同导致的. 认识浏览器内核 ...
CSS浏览器兼容性的4个解决方案：浏览器CSS样式初始化、浏览器私有属性，CSS hack语法和自动化插件...
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了(如果全写出来,那真是一箩筐),更让人头疼的是,还要面临各种适配.兼容性问题. 一直以来都是头痛医头脚痛医脚,没有进行系统的梳理,整个 ...
浏览器与css的兼容,CSS浏览器兼容性与解决
一.超链接访问后hover样式不出现 1.现象描述: 同时设置了a:visited和a:hover样式,但一旦超链接点击过后,hover的样式就不再出现了. 2.解决方法: 调整样式顺序为先a:vis ...
html网页自动兼容模式,解决CSS浏览器兼容性问题的4种方案
前端是一个苦逼的职业,不仅因为技术更新快,而且要会的东西实在太多了,更让人头疼的是,还要面临各种适配.兼容性问题. 为什么会有浏览器兼容性问题? 还不是因为浏览器厂商太多了! Chrome,Frire ...
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 ...

HTML css——浏览器兼容性

浏览器兼容性

问题产生原因

厂商前缀

css hack

渐进增强和优雅降级

caniuse

HTML css——浏览器兼容性相关推荐

最新文章

热门文章

HTML css——浏览器兼容性

浏览器兼容性

问题产生原因

厂商前缀

css hack

渐进增强 和 优雅降级

caniuse

HTML css——浏览器兼容性相关推荐

最新文章

热门文章

渐进增强和优雅降级