浏览器兼容

2018-10-09 本文已影响14人王瓷锤

为何会有浏览器兼容问题

因为市场上的浏览器有很多，不同的浏览器内核对网页的解析存在差异，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。

处理兼容问题的思路

是否要做
- 产品的角度：受众浏览器的比例，效果优先还是基本功能优先
- 成本的角度
做到什么程度
- 让哪些浏览器支持哪些效果
如何做
- 根据兼容需求选择技术框架/库
- 根据兼容需求选择兼容工具：
  
  html5shiv.js：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。具体用法如下：
  1. 首先在<head>中添加代码：
  2. 然后在CSS中声明这些html5标签为块级元素：
    article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}
  respond.js：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。具体用法为在<head>中添加如下代码：
  
  css reset：它是用来重置（复位）元素在不同核心浏览器下的默认值，尽量保证元素在不同浏览器下的同一“起跑线”，仅此而已，它不是万能的！在不同核心浏览器下，对于css 属性对某些元素的作用呈现出来的偏差，不是CSS reset所能解决的，它只是解决或部分解决元素的默认初始值问题（约定起跑线而已）
  normalize.css：是一种CSS reset的替代方案，它的创造目的有如下几种：
  1. 保护有用的浏览器默认样式而不是完全去掉它们
  2. 一般化的样式：为大部分HTML元素提供
  3. 修复浏览器自身的bug并保证各浏览器的一致性
  4. 优化CSS可用性：用一些小技巧
  5. 解释代码：用注释和详细的文档来
  modernizr：Modernizr是基于渐进增强理论来开发的，所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始，一个接一个的添加增强的应用层。因为使用了Modernizr，所以你容易知道浏览器都支持什么。在<html class=“。。。。”>标签添加支持或不支持的class。有的话就直接用，没有的话就用另外的替代。
  
  postCSS：PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的，比如可以支持变量和混入（mixin），增加浏览器相关的声明前缀，或是把使用将来的 CSS 规范的样式规则转译（transpile）成当前的 CSS 规范支持的格式。
- 条件注释（只针对IE6,7,8,9浏览器）
- js能力检测：它的目标是通过javascript识别浏览器的能力
- CSS hack：CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，在caniuse中可查看不同属性在浏览器中的兼容情况

CSS属性级Hack :
color:red; /* 所有浏览器可识别/
_color:red; / 仅IE6 识别 /
color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
+color:red; / IE6、IE7 识别 /
[color:red; / IE6、IE7 识别 /
color:red\9; / IE6、IE7、IE8、IE9 识别 /
color:red\0; / IE8、IE9 识别/
color:red\9\0; / 仅IE9识别 /
color:red \0; / 仅IE9识别 /
color:red!important; / IE6 不识别!important 有危险/

CSS选择符级Hack
html #demo { color:red;} / 仅IE6 识别 /
+html #demo { color:red;} / 仅IE7 识别 /
body:nth-of-type(1) #demo { color:red;} / IE9+、FF3.5+、Chrome、Safari、Opera 可以识别 /
head:first-child+body #demo { color:red; } / IE7+、FF、Chrome、Safari、Opera 可以识别 /
:root #demo { color:red\9; } : / 仅IE9识别 /

渐进增强和优雅降级

渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保持最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能以达到更好的用户体验（适用于安全性较高的银行网站等）
优雅降级（graceful degradation）：一开始就构建完整的功能，再针对低版本浏览器进行兼容（大多数网站开发的思路）

常见属性的兼容情况

inline-block>=ie8
min-width/min-height>=ie8
:before/:after>=ie8
div:hover>=ie7
background-size>=ie9
圆角>=ie9
阴影>=ie9
动画/渐变>=ie10

常见浏览器兼容问题及处理范例

不同浏览器的标签默认的内外边距不同
问题症状：随便写几个标签，不加样式控制的情况下，不同浏览器的margin 和padding差异较大。
碰到频率：100%
解决方案：css里 *{margin:0;padding:0;}
块属性标签float后，又有横向的margin的情况下，在ie6显示margin比设置的大
问题症状:常见症状是ie6中后面的一块被顶到下一行
碰到频率：90%
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性，或者不适用margin，直接改用padding
设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
问题症状：在上述浏览器中，部分块元素拥有默认高度（低于16px高度），所以在设置较小高度后对其没有作用。
碰到频率：60%
解决方案：1）给元素添加声明：font-size:0;
2）给元素添加声明：overflow:hidden;
3）设置行高小于你设计的高度值
备注：出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二个问题）
问题症状：IE6里的间距超过设置的间距
碰到频率：20%
解决方案：在display:block;后面加入display:inline;display:table;
图片默认有间距
问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加上问题一中提到的通配符也不起作用
碰到频率：20%
解决方案：使用float属性为img布局
备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。用float属性去除是最好的方法
浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
碰到几率：5%
解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开发时，有很多情况下我们有这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
清除浮动

.clearfix:after{
content:"";
display:block;
clear:both;
}
.clearfix{
*zoom:1;
}仅对IE6,7有效，IE6,7中没有：after属性，zoom：1可使其具有相似效果

比如这样一个CSS设置：
div { height: 300px; *height: 200px; _height:100px; }

参考文献：

https://blog.csdn.net/xustart7720/article/details/73604651/
https://blog.csdn.net/flqbestboy/article/details/76599673
https://blog.csdn.net/weixin_38536027/article/details/79375411