浏览器兼容

1.什么是 CSS hack

由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack。

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

1. 需不需要做

• 产品的角度：网站的受众，受众使用浏览器的比例，是功能优先还是效果优先。
• 成本的角度：预算是否足够，是否划得来。

2. 做到什么程度：让哪些浏览器支持哪些效果？
3. 如何做:

• 根据兼容需求选择技术框架/库
• 根据兼容需求选择兼容工具
• post CSS
• 条件注释、CSS hack、js能力检测做一些修补

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

1. 条件注释

    <!--[if IE]>
    这段文字只在IE浏览器显示
    <![endif]-->

    <!--[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]-->

    <!--[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]-->

2. 不同的去浮动方式

.clearfix:after{
  content: '';
  display: block;
  clear: both;
}
.clearfix{
  *zoom: 1; /* 仅对ie67有效 */
}   

3. 使用inline-block方式

.target{
  display: inline-block;
  *display: inline; 
  *zoom: 1;
}   

4. 属性前缀法

.hack{  
/*注意顺序，否则IE6/7下可能无法正确显示，导致结果显示为白色背景*/  
    background-color:red; /* All browsers */  
    background-color:blue !important;/* All browsers but IE6 */  
    *background-color:black; /* IE6, IE7 */  
    +background-color:yellow;/* IE6, IE7*/  
    background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */  
    background-color:purple\0; /* IE8, IE9, IE10 */  
    background-color:orange\9\0;/*IE9, IE10*/  
    _background-color:green; /* Only works in IE6 */  
    *+background-color:pink; /*  WARNING: Only works in IE7 ? Is it right? */  
}  

5. 选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

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

• 条件注释：是于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。
• IE Hack：使用特殊的符号或者方式写出只有IE浏览器可以解析的代码，有CSS属性前缀法、选择器前缀法以及IE条件注释法。
• js 能力检测：识别浏览器的能力，确定浏览器支持特定的能力，给出解决方案。
• html5shiv.js：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
• respond.js：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
• css reset：通过重新定义标签样式，“覆盖”浏览器的CSS默认属性
• normalize.css：在默认的HTML元素样式上提供了跨浏览器的高度一致性。保护了有价值的默认值，修复了浏览器的bug，模块化。
• Modernizr：判断浏览器是否支持某些HTML5/CSS3特性。
• postCSS：是一个使用 JavaScript 插件来转换CSS的工具，通过PostCSS这个平台，我们自己也能够开发一些插件，来处理CSS。

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

caniuse: 查询CSS属性兼容性
browserhack 查css属性 选择器在各浏览器Hack的写法