浏览器兼容

1.什么是css hack

由于不同浏览器或者相同浏览器不同版本对css的解析不完全一样，因此导致页面效果不一样，这时我们需要针对不同浏览器去写不同的css，让它能在不同浏览器得到我们需要的效果，这就是css hack。

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

1.考虑要不要做

• 从产品的角度（产品的受众、受众的浏览器比例、针对受众是效果优先还是基本功能优先）
• 成本的角度（有没有必要去兼容）

2.做到什么程度
要做兼容的话要达到什么程度，让哪些浏览器兼容，IE浏览器做到哪个版本。

3.如何做

• 根据兼容需求选择技术框架/库；
• 根据需求选择兼容工具（html5shiv.js、respond.js、css reset、 normaliz.css、modernizr）
• postCss
• 条件注释、CSS hack、js能力检测。

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

1.条件注释
是html源码中被IE有条件解释的语句；可用来向IE提供和隐藏代码。

  <!--[if IE 6]>
  <p>You are using Internet Explorer 6.</p>
  <![endif]-->  /* IE6中执行 */
  <!--[if !IE]><!-->
  <script>alert(1);</script>
  <!--<![endif]-->   /* 非IE执行 */
  <!--[if IE 8]>
  <link href="ie8only.css" rel="stylesheet">
  <![endif]-->   /* IE8中执行 */
  只在IE下生效
  <!--[if IE]>
  这段文字只在IE浏览器显示
  <![endif]-->
  只在IE6下生效
  <!--[if IE 6]>
  这段文字只在IE6浏览器显示
  <![endif]-->
  只在IE6以上版本生效
  <!--[if gte IE 6]>
 这段文字只在IE6以上(包括)版本IE浏览器显示
 <![endif]-->
 只在IE8上不生效
 <!--[if ! IE 8]>
 这段文字在非IE8浏览器显示
 <![endif]-->
 非IE浏览器生效
 <!--[if !IE]>
 这段文字只在非IE浏览器显示
 <![endif]-->

条件注释结合js

<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Paste_Image.png

2.属性前缀法
IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识

.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9;  /*ie/edge 6-8*/
}

2.1 浏览器私有前缀添加

-webkit-border-radius: 50%;//chrome
-o-border-radius: 50%;//opera
-moz-border-radius: 50%;//FixFore
-ms-border-radius: 50%;//IE edge

3.选择器前缀法

*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有效

4.使用兼容工具
html5shiv.js：在IE6~8上模拟html5标签
respond.js：在IE6~8上模拟CSS3 Media Queries
css reset normalize.css样式重置
modernizr库

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

• 条件注释
  是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。利用IE6-9的漏洞来区分IE各版本。
• IE Hack
  IE浏览器不同版本对css的解析不完全一样，因此导致页面效果不一样，这时我们需要针对浏览器去写不同的css，让它能在浏览器得到我们需要的效果，这就是css hack。
• js 能力检测
  检测浏览器的类型及版本，是否支持特定的能力，然后根据检测的结果让页面兼容浏览器。检测浏览器支持的属性和方法。
• html5shiv.js
  兼容性工具，模拟html5标签，用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
• respond.js
  兼容性工具，为IE6-8和其他不支持css3媒体查询功能的浏览器提供媒体查询的min-width和max-width特性，实现响应式网页设计。
• css reset
  兼容性工具，将浏览器的默认样式全部去掉，重新定义标签样式。
• normalize.css
  重置样式，与css reset相比相对平和，会保留有用的样式，更好的通用性和可维护性。
• Modernizr
  一个用来检测浏览器功能支持情况的 JavaScript 库，会为html标签生成一批css的class名，来标记当前浏览器支持不支持的特性，这样就可以方便为浏览器添加兼容样式。
• postCSS
  它是一个平台，可以让一些插件在上面跑来处理css，通过插件可以帮css处理成兼容性代码。

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

http://caniuse.com
<a href="http://browserhacks.com">查询hack写法</a>