兼容css,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; /*这个顺序是不能变得*/

}

条件注释

alert(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写法查询