浏览器兼容

1.css hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。

css hack的三种写法

• 属性前缀法(即类内部Hack)：例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

.box{
  color:red;
  _color: red; /*ie6*/
  *color:red;  /*ie6,7*/
  color:red\9;  /*ie/edge 6-8*/
}

• 选择器前缀法(即选择器Hack)
• E条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效

2.浏览器的兼容思路

• 首先考虑这个问题要不要处理

  1. 产品的角度。要考虑产品的受众是哪些人和市场，这些受众多使用的浏览器是哪种，比例如何，是效果优先还是功能优先。

2. 成本的角度。要从成本的角度考虑是都必要做兼容。

• 其次考虑要做到什么程度的兼容

  就是考虑让那些浏览器做到支持哪些效果。

• 最后考虑该怎么去做

  1. 根据兼容需求选择技术框架/库（jquery等）
  2. 根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)
  3. postCSS:目标是通过自定义插件和工具这样的生态系统来改造CSS。与Sass和Less这些预编译器相同的原则，PostCSS把扩展的语法和特性转换成现代的浏览器友好的CSS
  4. 条件注释、CSS Hack、js 能力检测做一些修补

3. 常见浏览器兼容写法

1. 条件注释

记住单词名字就懂什么意思了

    
    
    
    

4. 常见兼容相关术语名词

1. 条件注释。条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
2. ie hack。针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程。
3. js 能力检测。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
4. html5shiv.js。 用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
5. respond.js。让IE6-8支持CSS3 Media Query。
6. css reset。 是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。
7. normalize.css。保护有用的浏览器默认样式而不是完全去掉它们。为大部分HTML元素提供标准化样式。修复浏览器自身的bug并保证各浏览器的一致性。用一些小技巧优化CSS可用性。用注释和详细的文档来来解释代码。
8. Modernizr。帮助探测浏览器是否支持某种新特性，甚至可以加载额外的script脚本。使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
9. postCSS。它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码.

5.查询属性兼容性的网站

caniuse网站 https://caniuse.com/