浏览器兼容问题

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种以上浏览器兼容的写法
(1)条件注释

image.png

(2)属性前缀

image.png

(3)清除浮动

(4)inline-block

image.png

(5)html5shiv.js，respond.js
在页面头部引入

image.png

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

4.以下工具/名词是做什么的
条件注释: conditional comment 是HTML源码中被IE有条件解释的语句，条件注释可以被用来向IE提供及隐藏代码

IE Hack:针对IE浏览器的CSS hack

js 能力检测:使用js检测浏览器是否支持某些属性和方法。

html5shiv.js:让IE6-8识别html5新标签，使其可以包裹元素，可以设置样式。

respond.js:让IE6-8支持css3媒体查询，实现响应式效果。

css reset:去除浏览器的默认样式，简单粗暴的去除了所有html元素的默认样式。

normalize.css:css reset的改良版，去除了导致不同浏览器渲染效果不同的一些样式，同时保留了一些有用的默认样式。

Modernizr:检测浏览器是否支持html5和css3新特性的js库，根据检测结果给html元素添加相应的类名，以方便开发者根据这些类名进行相应的样式开发。

postCSS:根据不同浏览器给样式添加相应的前缀(例如-moz-, -webkit-等)，用户只需设置样式的标准写法，postCSS会自动添加前缀。

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