浏览器兼容

什么是 CSS hack？

CSS hack由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

谈一谈浏览器兼容的思路

明确要不要做兼容
1.从产品的角度考虑这个范围,比如使用产品的人，使用各浏览器的比例，效果优先还是基本功能优先。
2.从成本的角度。
明确要兼容的范围
明确要兼容的浏览器范围，不需要兼容的浏览器就可以一并处理。
解决兼容问题
1.根据兼容需求引入技术框架/库
2.根据兼容需求选择兼容工具。比如（html5shiv.js、respond.js、css reset、Modernizr、postCSS）
3.使用css hack，条件注释，js 能力检测做一些修补。

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

条件注释

2.类内属性前缀法
比如

div{
background:green;
*background:red;/*forIE6*/(bothIE6&&IE7)
+background:red;
_background:green;
background:red\9\0;
background:red\9;
}

说明：在标准模式中
“-″减号是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
不管是什么方法，书写的顺序都是正常的写在前面，IE7的写在中间，IE6的写在最后面

3.选择器前缀法

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

4.使用html5shiv.js、respond.js、css reset、Modernizr、postCSS等兼容工具。
5.浏览器的前缀如-webkit- ，-moz-，-ms-，-o-。

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

1.条件注释
条件注释是于HTML源码中被 Microsoft Internet Explorer，有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。
2.IE Hack
同一厂商的浏览器的不同版本，如IE6和IE7，或者不同浏览器对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS。
3.js 能力检测
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何如何，只要确定浏览器支持特定的能力，就可以给出解决方案。
4.html5shiv.js
HTML5 Shiv是JavaScript的一种备选方案，该方案在IE9版本中优先启用HTML5元素样式，但不允许使用没有由JavaScript定义过的元素样式。html5shiv.js用于在IE9以下的浏览器模拟html5的标签。
5.respond.js
模拟css3的媒体查询，使ie6支持媒体查询兼容响应式布局。
6.css reset
早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题，所以使用CSS Reset就是为了清除所有浏览器默认样式，让它一切归零！
7.normalize.css
Normalize.css是一种CSS reset的替代方案，当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合，而不是把所有的默认样式都清零。
8.Modernizr
Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。目前，通过检验浏览器对一系列测试的处理情况，Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。例如，如果页面支持 box-shadow 属性，那么 Modernizr 会添加 boxshadow 类。如果不支持，那么它用 no-boxshadow 类作为替代进行添加。
9.postCSS
把 CSS 解析成 JavaScript 可以操作的抽象语法树结构AST，并调用插件来处理 AST 得到结果。

一般在哪个网站查询属性兼容性？

https://caniuse.com/