浏览器兼容性探讨

---

关于浏览器兼容的大致思路

1. 首先要考虑的就是有没有必要做

   • 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
   • 成本的角度 (有无必要做某件事)

2. 如果要做兼容，那么做到什么程度

   • 让哪些浏览器支持哪些效果

3. 如何做

   • 根据兼容需求选择技术框架/库(jquery)
   • 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
     postCSS

• 条件注释、CSS Hack、js 能力检测做一些修补

---

什么是CSS hack

CSS hack，是一种用属性前缀、选择器前缀、以及IE条件注释法等hack技术，由于不同厂商，不同浏览器，不同版本中，对CSS的支持程度不同，表现方式也有差异。
因此为了，尽可能的缩小差异，达到不同浏览器中，都有较为一致的体验，因此需要用到CSS hack技术。
在 www.caniuse.com 网站中，可以查看各种HTML CSS 的浏览器兼容支持情况。

---

ie6、7的 hack 写法是？

1. 首先所有的IE 10以下的浏览器browser（不含10）都支持HTML条件注释法，

2. IE6能识别下划线" _ "和星号" * "，IE7能识别星号" * "，但不能识别下划线" _ "，IE6~IE10都认识"\9"。
   因此：
   比如关于color 的hack写法：
   .box{
   color: red;
   _color: blue; /* IE6中，color是正常识别的，但是_color也能识别，因为产生后者覆盖前者，IE6中颜色便是blue了。 /
   color: pink; /IE6、7都能识别， 所以如果继续添加这一行，那么IE 6中，会在此被pink覆盖，如果是在IE 7中，由于不能识别之前的_color, 所以第一次渲染成了color: red; 第二次被color: pink; 覆盖。 /
   color: yellow\9; /ie/edge 6-8*/
   }

3. 另外就是使用条件注释法，在HTML写入：

  <!--[if IE 6]>
  <p>You are using Internet Explorer 6.</p>
  <![endif]-->

这代表如果是IE 6 浏览器，那么则有如上的p段落。

---

  <!–-[if IE 7]>
  <link rel="stylesheet" href="ie7.css" type="text/css" />
  <![endif]–->

这代表，如果是IE 7 浏览器，那么引入如上的css样式表。

---

5种以上的浏览器兼容写法

1. 条件注释

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->

2. 属性前缀

.box{
  color: red;
  _color: blue; /*ie6*/
  *color: pink; /*ie67*/
  color: yellow\9;  /*ie/edge 6-8*/
}

3. 选择器前缀

span{ /仅ie6/
display: block;
}

4. 使用Modernizr工具

<div class="no-textshadow"></div>
.no-textshadow{border:1px solid red;}

5. 条件注释和兼容工具相结合

 <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

---

以下工具/名词是做什么的

• 条件注释
  条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。IE10已经不再支持条件注释

• IE Hack
  是针对IE 兼容的特殊写法，比如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

• js 能力检测
  各个版本的浏览器有许多不一致性，和各种怪癖，因此需要用js对浏览器是否支持某种特定的能力，做检测。确定之后，就可以给出相关的方案。

• html5shiv.js
  针对不支持HTML5标签的浏览器，创建并模拟HTML5的标签的效果并使相应的CSS生效。（html5shiv is an HTML5 JavaScript shim for IE to recognise and style the HTML5 elements）

• respond.js
  为不支持CSS3媒体查询的浏览器(IE6-8)（以及其他可能不支持的浏览器）模拟CSS3的媒体查询。

• css reset
  早起浏览器支持和理解的css规范不同，导致渲染页面时效果不一致， 会出现很多兼容性问题。因此需要在样式表一开始的地方，进行一些样式重置，最开始是最暴力的方式， * {margin:0; padding:0;}.后来发现，过于画蛇添足，回头又要用到很多默认样式，再回头贱贱地添加回来，因此css reset经过了不同阶段的发展，各方提出了自己的css reset方案。

• normalize.css
  直到 normalize.css出现，颠覆css reset 的理念。reset的目的，是将所有浏览器自带样式重置掉，这样易于保持各方浏览器渲染的异质性。
  而normalize的理念则是尽量保持浏览器的默认样式，不进行太多的重置。比css reset更高明的地方在于，normalize 项目研究了各种浏览器默认元素风格之间的差异，精确定位需要重置的样式。

• Modernizr
  是一个JS类库，用来检测浏览器的CSS3和HTML5能力，从而解决浏览器的兼容问题。

• postCSS
  一个用js插件对样式进行转换的工具

---

常见属性的兼容情况

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

---

参考

caniuse.com 查CSS属性兼容
browserhacks 查 Hack 的写法