浏览器的兼容性问题
2019-06-25 本文已影响0人
fly_198e
浏览器的兼容性问题是指同一份代码，有的浏览器效果正常，有的浏览器不正常。
兼容问题的主要来源：
- 同一产品，版本太老，bug越多，浏览器的更新本身就有修复这些bug的原因，添加支持新增代码，新增功能以及代码的新规则等等，则同一产品，版本越新功能越多，相对的bug也会少一些；
- 不同产品，不同标准，不同的实现方式；因为虽说以w3c为主流，但是浏览器还有内核差异，渲染方式的差异，同一属性不同浏览器不同的效果等。
处理兼容性问题的主要思路：
- 要不要做
- 产品的角度（产品的受众，受众的浏览器比例，效果优先还是功能优先）
- 成本的角度（是否有必要做某件事）
- 做到什么程度
- 让哪些浏览器支持哪些效果例如，pc端和移动端，支持哪些浏览器（例如：Chrome，IE，360等等），对于系统等级要求等等。
- 如何做
- 根据需求选择技术框架/库（jquery版本问题）
- 根据需求选择兼容工具（html5shiv.js,respond.js,css reset,normalize.css Modernizr(比较重要),PostCSS）
- 使用一些较老的技术手段，例如：条件注释，CSS Hack ，JS能力检测做一些修补。
渐进增强和优雅降级
- 渐进增强是针对低版本的浏览器进行构建页面，保证最基本功能，然后在针对高级浏览器进行效果，交互等改进和追加功能打到更好的用户体验(一般在政府部门网站以及银行等部门使用较多)；
- 优雅降级是指一开始就构建完整的功能，然后针对低版本浏览器进行兼容（大部分网站 普遍使用该手段）。
处理兼容问题的手段
合适的框架：
- bootstrap（>=ie8）
- jQuery 1(>=ie6),jQuery2(>-ie9)(2的代码量比1的小，文件体积也小）
- Vue（>=ie9）
条件注释：
- 条件注释是于HTML源码中被IE有条件的解释的语句。条件注释可被用来向IE提供及隐藏代码。 只能用于IE浏览器6且只用于6-8版本， 在IE10不再支持条件注释。
- 写法：
<!-- [if IE 6]>
<p> you are using Internet Explorer 6.<p>
<!--[endif]-->
<!--该代码表示，如果浏览器是IE6 则出现该p标签-->
<!-- [if !IE]><!-->
<script>alert(1)；</script>
<!--[endif]-->
<!--如果非IE浏览器则代码前后两段都是注释，则会出现弹窗，反之则不会出现弹窗-->
CSS hack
什么是CSS hack：
- 由于不同厂商的浏览器，比如Internet Explorer, Safari,Moilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7， 对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能在不同的浏览器中也能得到我们想要的页面效果。总的来说就是使用一些奇怪的手段达到我们想要的目的。
CSS Hack：
- CSS Hack大致有3种表现形式，CSS属性 前缀法、 选择器前缀法以及IE条件注释法(即HTML头 部引用ifIE) Hack, 实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
- 属性前缀法(即类内部Hack):例如IE6能识别下划线""和星号" ", IE7能识别星号" "，但不能识别下划线""，IE6~1E10都认识"\9" ，但firefox前述三个都不能认识2.选择器前缀法(即选择器Hack)；
- 选择器前缀法（即选择器Hack);
- IE条件注释法(即HTML条件注释Hack):针对所有IE(注: IE10+ 已经不再支持条件注释): ，针対IE6及以下版本: 。这类Hack不仅対CSS生效，対写在判断珸句里面的所有代码都会生效。
常见的hack写法：
- 在IE6中，由于未对属性做检查多导致的，换句话说就是利用IE老版本浏览器自身的bug来实现样式覆盖达到相应的效果。
.box{
color: red;
_color: blue;/*ie6*/
*color: pink;/*ie67*/
color: yellow;/*ie6-8*/
}
<!-- [if IE7]>
<link rel="stylesheet" href="ie7.css" type="text/css"/>
<![ebdif]>
由于IE8以前IE浏览器并不支持display:inline-block;,则通过下面样式达到效果。
.target{
display:inline-block;
*display: inline;
*zoom: 1; /*IE67特有的样式，使元素生成类似BFC 的效果，可以设置宽高等效果*/
}
由于IE67不支持after，所以对于清除浮动有以下代码；
.floatfix::after{
content: '';
display: block;
clear: both;
}
.floatfix{
*zoom:1;/*仅对IE67有效*/
｝
给<html>赋予属性用于需要达到解决兼容性问题；
<!-- [if IE8 ]>
<html dir="ltr" lang="en-us" class=" no-js ie8 oldie">
<![endif] -->
.ie8 .box{
color: blue;
}
常见的属性兼容情况：
- inline-block:>=ie8
- min-width/min-height:>=ie8
- :before,:after:>=ie8
- div:hover>ie7
- background-size:>=ie9
- 圆角：>=ie9
- 阴影： >=ie9
- 动画/渐变：>=ie10
Modernizr:
- Modernizr是一个开源的JS库，它使得那些基于访客浏览器的不同（指对新标准支持性的差异）而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持[HTML5]和CSS3的浏览器中充分利用[HTML5]和CSS3的特性进行开发，同时又不会牺牲其他不支持这些新技术的浏览器的控制。
- 当你在网页中嵌入Modernizr的脚本时，它会检测当前浏览器是否支持CSS3的特性同时也会检测是否支持[HTML5] 特性,标签的类型和属性等。在获取到这些信息的基础上，你可以在那些支持这些功能的浏览器上使用它们，来决定是否创建一个基于JS的 fallback，或者对那些不支持的浏览器进行简单的优雅降级。另外，Modernizr还可以令IE支持对[HTML5]的元素应用CSS样式，这样开发者就可以立即使用这些更富有语义化的标签了。
Modernizr的用法：
<html class="no-js">
.no-flexbox .box{
display:block;
}
在用户禁用js时，无法使用时需提示用户使用js。
.no-js{
}
何动手测试浏览器兼容性：
- 对于 windows 系统，下载个360浏览器，点地址栏的小图标可以切换兼容模式和极速模式。其中极速模式是 webkit 内核，而兼容模式就是 ie 内核。 在兼容模式下浏览器界面右键，可以切换兼容的浏览器。ie7到 ie11都可以切换。用来测试很方便。
