浏览器兼容，工具/网站

一、什么是CSS hack

CSS hack由于不同厂家的浏览器，比如Internet Explorer，Safari，Mozilla Firefox，Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这时候我们就针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
简单地说，CSS hack的目的就是让你们的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

CSS Hack大致有三种表现形式

• CSS属性前缀法
• 选择器前缀法
• IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
  注：IE条件注释法针对所有IE（IE10不再支持条件注释）。

二、谈一谈浏览器兼容的思路

- 要不要做

• 产品的角度： 产品面向对象，浏览器使用比例，以效果为主导还是以功能主导；
• 成本的角度： 有无必要做；

- 做到什么程度

• 让哪些浏览器支持哪些效果；

如何做

• 根据兼容需求选择技术框架/库（jquery）
• 根据兼容需求选择兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS)；
  -条件注释，CSS Hack，js能力检测等做一些修补；

三、列举五种以上浏览器兼容的写法

1.条件注释

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

2.属性选择器

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

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有效
@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.条件注释结合选择器整体优化

< !DOCTYPE html>
< !--[if IEMobile 7 ]>
< !--[if lt IE 7 ]>
< !--[if IE 7 ]>
< !--[if IE 8 ]>
< !--[if (gte IE 9)|(gt IEMobile 7)|!(IEMobile)|!(IE)]> < !-->
(注： 符号“>”与内容无空格)

5.利用Modernizr工具

运行的时候它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性，支持的特性就直接显示该天特性的名称作为一个class（例:canvas,websockets），不支持的特性显示的class是“no-特性名称”。以下是IE9下生成的特征类型。

可以直接在CSS中编辑不同浏览器下的命令，由于他们相应的浏览器才会显示，所以变相的解决了不兼容问题，但较为麻烦，如：

.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;
}

四、以下工具/名词是做什么的

条件注释

条件注释 是于HTML源码中被 IE 有条件解释的语句。条件注释可被用来向 IE提供及隐藏代码。 条件注释最初于微软的 Internet Explorer 5浏览器中出现，并且直至 Internet Explorer 9 均支持。微软已宣布于IE 10停止支持。

IE Hack

针对IE浏览器编写不同得修改（Hack）的CSS的让IE能够正常渲染的过程。

js 能力检测

浏览器的能力检测目标不是检测特定的浏览器，而是检测浏览器的能力。这样，只需要检测浏览器是否支持特定的能力，就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。

html5shiv.js

用于解决IE 9以下版本浏览器对html5新增标签不识别，并导致CSS不起作用的问题。（html5shiv.js的原理是在执行时先往head中插入应用到html5标签的css样式，然后对于所有html5标签都执行一次document.createElement(nodeName)这样，浏览器在渲染body部分时，对于html5标签就能够正确的应用css样式，这也就是html5shiv.js必须放置在head中的原因。）

respond.js

Respond.js 是一个小脚本，用于为 IE6-8 以及其它不支持 CSS3 媒体查询功能的浏览器提供媒体查询的 min-width 和 max-width 特性，实现响应式网页设计。

css reset

将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉。

normalize.css

Normalize.css 是一个可以定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一，特点：

• 保留有用的默认值，不同于许多CSS reset统统改掉；
• 标准化样式，适用范围广的元素；
• 纠正错误和常见的浏览器不一致性；
• 一些细微的改进，提高了易用性；
• 使用详细的注释来解释代码。

Modernizr

Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

postCSS

它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将CSS解析成抽象语法树，通过PostCSS这个平台，我们能够开发一些插件，来处理CSS。热门插件如autoprefixer，它可以帮我们处理兼容问题，只需正常写CSS，autoprefixer可以帮我的自动生成兼容性代码

五、一般在哪个网站查询属性兼容性？

http://caniuse.com/