CSS兼容性

1、什么是CSS hack

不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。于是我们就需要针对不同的浏览器去写不同的CSS，让它能在不同的浏览器中也能得到我们想要的页面效果。简单来说，就是利用不同浏览器对不同css的识别不同这个bug，在css中加入兼容各个浏览器的css写法。
CSS hack大致有表现形式：CSS属性前缀法、选择器前缀法与IE条件注释法。

2、浏览器兼容的思路

a)首先判断是否需要做浏览器兼容，分别从产品的角度（受众、受众的浏览器比例、效果优先还是功能优先等等）与成本的角度进行判断
b)然后确定兼容的范围，比如需要浏览器支持哪些效果，选择渐进增强或者是优雅降级；
c)最后确定兼容的方法：1.根据兼容需求选择技术框架/库（jQuery）；2.根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、nomarlize.css、Modernizr）；3.使用postcss；4.使用条件注释、CSS hack、js能力检测做一些修补。
一般来说优雅降级与渐进增强的原则是：如果比较难兼容的，就保持渐进增强的原则，先维持正常的可用功能实现，再针对其他浏览器兼容做更优秀的改动。如果是比较容易的兼容，就保持优雅降级的原则，先构建完整版本，再去兼容其他不好解决的兼容。

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

CSS属性前缀hack
.target{
  display: inline-block;
  *display: inline; /* 对于ie6、7不兼容inline-block，所以需要加上下面这两句才生效*/
  *zoom: 1;   /*这个顺序是不能变得*/
}

条件注释




  项目    范例  说明
  ！ [if !IE]    非IE
  lt    [if lt IE 5.5]  小于IE 5.5
  lte   [if lte IE 6]   小于等于IE6
  gt    [if gt IE 5]    大于 IE5
  gte   [if gte IE 7]   大于等于IE7
  | [if (IE 6)|(IE 7)]  IE6或者IE7

条件注释结合类选择器

选择器前缀hack
*html       *前缀只对IE 6生效
*+html     *+前缀只对IE 7生效
@media screen\9{...}   \9只对IE 6/7生效

利用Modernizr.js等工具
​运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。以下是IE9下生成的特征类型。可以直接使用Modernizr在元素里生成的class名称，在你的css文件里定义相应的属性以便支持当前浏览器。例如，下面的代码可以属性，在支持shadow阴影的浏览器显示shadow，不支持的浏览器显示标准的边框：
.boxshadow #MyContainer { 
border: none;
 -webkit-box-shadow: #666 1px 1px 1px;
 -moz-box-shadow: #666 1px 1px 1px;
} 
.no-boxshadow #MyContainer {
 border: 2px solid black;
}

4、常用工具/名词

a)条件注释: 条件注释是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE10停止支持。
b)IE Hack: 针对IE浏览器编写不同的CSS的让IE能够正常渲染的过程
c)js 能力检测: 使用JS的语法检测浏览器支持的属性，以便展示效果
d)html5shiv.js: 用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。
e)respond.js: 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
f)css reset: 覆盖浏览器默认的css属性
g)normalize.css: Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
h)Modernizr: 是一套 JavaScript 库 ，用来侦测浏览器是否支持 HTML5 与 CSS3 等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
i)postCSS: PostCSS是一个JS插件转换样式表的工具。这些插件能够检验你的CSS、支持变量和混合，转化css3的新特性语法、行内图片等。
j)css属性兼容性查询
兼容hack写法查询