浏览器兼容问题知识总结

一、什么是 CSS hack

如我们所见，浏览器种类是很多的，有 Chrome、FireFox、IE、国产浏览器等等，每个浏览器甚至同一浏览器的不同版本对页面渲染标准、样式识别都不一样，所以，开发者为了给不同的浏览器展示同一种页面效果或者完整效果，就需要对这些情况进行适配。主要是利用一些浏览器的 BUG 或者 样式前缀来达到效果。

参考： CSS 滤器 | WIKI

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

1. 要不要做

首要要明确用户受众群体，像政府、银行或者一些传统的行业，内部使用的电脑还是Window XP，所以此时就需要考虑低版本的 IE 浏览器的兼容问题，明确在低版本 IE(IE6、IE7)的 hack 写法，JS 的一些写法。然后是成本问题，解决兼容问题，需要用各种 hack 来处理，所以增加了开发成本，假如成本足够，而且又不想丢失低版本浏览器用户，那就可以做兼容处理。

2. 要做到什么程度

浏览器种类和对应的浏览器版本都非常多，如果不是硬性要求，那么在相对久远的浏览器版本就可以不必适配兼容性了，因为本身用户已经很少，并不值得投入过多精力。

3. 如何做

• 兼容框架

可以使用一些别的公司封装好的框架，里面已经为我们封装好兼容性的解决方案，可直接使用，如：jQuery。

• 兼容工具

一般都是一些处理特定兼容性的工具，如： html5shiv.js、respond、CSS Reset、normalize.css、Modernizr

• JS 转换样式工具

postcss

• 渐进增强

针对低版本开发，保证最基本功能，再逐渐提升，为高版本浏览器的用户提供更好的交互。

• 优雅降级

一开始就构建了完整的功能，再根据浏览器做兼容。

参考： 渐进增强与优雅降级的区别 | Stack Overflow

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

1. 前缀样式

为样式添加特定前缀，会限定仅该指定浏览器内核才能识别该样式。

p {
  color: #000;         /* 段落在忽略下面所有规则的浏览器中显示为黑色 */
  -moz-color: #F00;    /* 段落在 Gecko 浏览器中显示为红色 */
  -webkit-color: #00F; /* 段落在 Webkit 浏览器中显示为蓝色 */
  -khtml-color: #0F0;  /* 段落在 KHTML 浏览器中显示为绿色 */
  -xv-color: #FF0;     /* 段落在 Presto 浏览器中显示为黄色 */
}

2. 下划线 hack

IE 6 及以下版本可以识别以下划线开头的样式，但其他版本并不能识别（还可以识别其他字符，但主要用下划线）

#elem {
  width: [W3C 模型宽度];
  _width: [BorderBox 模型];
}

3. 星号 hack

IE 7 及以下版本可以识别一些特定字符，这里也主要用星号，如下：

#elem {
  width: [W3C 模型宽度];
  *width: [BorderBox 模型];
}

4. 子选择器 hack

IE 6 及以下版本不支持子选择器>，如

/* IE 6 下颜色没变化 */
html > body p { color: blue; }

5. 条件注释

不同版本的 IE 浏览器对 HTML 注释的识别不一样，如：

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

• 条件注释

不同版本的 IE 浏览器对 HTML 注释的识别不一样，使用条件注释可以为不同版本 IE 加载不同的 CSS 样式。

• IE Hack

很多兼容问题，其实就是 IE 浏览器的兼容问题，所以 IE hack 就是根据当前版本的 IE BUG 来处理兼容性问题。

参考： 区分 IE8/IE7/IE6 以及其他浏览器-CSS | 张鑫旭

• js 能力检测

不同浏览器对 JS 的支持程度不同，所以在使用该 JS 的方法之前，可以先判断一下当前浏览器是否有该方法，但有些工具或框架可以为我们做这种事，如 jQuery

• html5shiv.js

为低版本浏览器识别新 HTML 5 标签的解决方案

• respond.js

为响应式的媒体查询@media提供降级方案

• css reset

为所有浏览器统一、初始化样式

• normalize.css

更优质的 CSS Reset 方案

• Modernizr

用来检测当前浏览器所支持的 HTML 5 和 CSS 3 新特性。

• postCSS

通过 JS 来改变 CSS 的一套工具，里面有各种插件，实现各种功能，如自动为样式加前缀、px单位转换等。

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

1. 简单直接点，直接百度或谷歌，兼容问题的坑，前辈们基本上都踩过了，如果没踩过的，恐怕靠我们自己也做不出来。
2. Can I Use。直接查询某种样式在各个浏览器、各个版本的支持程度。