浏览器兼容

1.什么是 CSS hack？

• 由于不同厂商的浏览器或者不同浏览器的版本（IE6-11，chorme/safari/opera/firefox等），对CSS的支持、解析不同。导致了我们在编写页面的过程中，为了获得统一的页面效果，需要针对某些特定的浏览器或者浏览器版本编写特定的CSS样式，这一过程就叫做CSS hack。
• CSS的分类：CSS大致有三种表现形式，IE条件注释法（即html头部引入if IE）hack，CSS选择器加前缀，CSS属性加前缀，实际项目中CSS hack 主要是针对不同IE浏览器版本的差别。
  1.IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
  2.选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
  3.属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

2.谈一谈浏览器兼容的思路

主要分三步：

1.要不要兼容？

• 产品的角度（产品的用户、用户的浏览器比例、效果优先还是基本功能优先）
• 成本的角度（值不值得的去做，做了是否可以达到预期的回报）
• boss说干咱就干

2.做到什么程度

• 支持哪些浏览器？支持到哪个版本？

3.如何做

• 根据兼容需求选择框架或库（jquery）
• 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
• postCss(可以自动给属性加前缀)
• 条件注释、CSS hack、JS能力检测做一些修补

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

• 条件注释
  除IE外都可识别
  
  
• 属性前缀

div{
  *color: blue;/*ie6有效 */
  _color: red;/*ie7有效 */
}

• 清除浮动

.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
.clearfix{
  * zoom: 1;
}

• inline-block

inline-block和inline
.div{
  display: inline-block;     /*IE8以及IE8以上才支持*/
  *display: inline;             /*IE7以及IE7以下才支持*/
  *zoom: 1;                      /*触发BFC*/
}

• html5shiv.js，respond.js
  在页面头部引入

<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script>

html5shiv.js可以模拟html5标签的特性，使不支持html5标签的浏览器也能使用html5标签。
respond.js则可以让不支持CSS3 media query，min-width和max-width属性的IE浏览器支持该属性。

• Modernizr
  可以检测浏览器是否支持 Html5 和 CSS3，对不支持的浏览器进行优雅降级。

4.

• 条件注释主要是针对IE浏览器不同版本在html头部的注释，比如``
• IE Hack主要是针对IE浏览器不同版本为了达到页面下效果一致，而使用的方法，主要有三种：IE条件注释法、选择器前缀法、属性前缀法。
• js 能力检测，可以检测出当前浏览器是否支持该JS特性，而不是检测浏览器的类型和版本。并根据检测的结果决定下一步的解决方案。
• html5shiv.js可以模拟html5标签的特性，使不支持html5标签的浏览器也能使用html5标签。
• respond.js则可以让不支持CSS3 media query属性的IE6-8浏览器支持该属性。
• css reset顾名思义，重置所有的css属性值，过去较流行的方案，由于太过于粗暴，使得所有标签同质化严重，缺乏特定作用，被放弃了。
• normalize.css，现在大家普遍使用的css初始属性值样式文件，既较大程度上满足了开发人员对标签样式的初始要求，又照顾了标签个性化，能力化的初衷。
• Modernizr，检测浏览器对html5、css3的属性是否可用，对不支持的浏览器进行优雅降级。Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。
• postCss，很方便的一种工具，可以自动给CSS属性添加各类浏览器的前缀，解放双手，程序员应该都不喜欢做无意义的重复工作吧？

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

1.http://caniuse.com/ 不仅可以查属性还可以查标签
2.http://browserhacks.com/ 可以查找不同浏览器的hack方法
3.http://tongji.baidu.com/data/browser 可以查询用户在不同浏览器、不同浏览器版本、不同终端、用户群的属性、用户群的行为中的比例，有利于开发人员判断是否有必要进行浏览器兼容以及兼容到哪个级别。