一、前言
做前端开发，必然少不了浏览器，然而不同的厂商有着各自版本的浏览器，不同的浏览器对css的理解和解析不一样。那用户使用不同厂商不同版本的浏览器，而我们要给用户一个统一的网页，那我们在写css时就必须考虑到网页在不同的浏览器展现所带来的问题。
例如，一个css属性，在IE 8不可以使用，但是在IE 9可以使用，而我们又使用了这个css属性，又必须在IE 8上展示，那我们就需要解决这个属性在不同版本的展示，也就是浏览器的兼容问题。下面通过一些解决思路和方法来探讨如何解决浏览器的兼容问题。
二、什么是 CSS hack
不同版本或不同厂商的的浏览器（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持和解析存在着差异，我们为在不同的浏览器获得统一的页面展现效果，就需要针对不同的浏览器写特定的CSS样式。我们把针对不同的浏览器写相应的CSS样式的过程称为CSS hack。
三、浅谈解决浏览器兼容的思路
1、要不要做这个产品
如果我们要做一个产品，首先要从成本和回报的角度来考虑，这个产品是否有必要做。
如果有必要，我们再从产品的角度思考又是为哪类用户做。用户会通过哪些浏览器来浏览网页，不同的浏览器使用的比例，以及是网页展示的功能优先还是网页展示的效果优先。这些问题我们都需要了解。
在这里推荐一个网站，百度统计，我们可以从这个网站了解到不同的浏览器的市场份额。从这个网站我们也可以看到，依然有一部分人群，使用比较老版本的浏览器（如IE 7、8）。我们的用户是不是大部分使用这些老版本的浏览器的，一般安全性比较高的政府机关或者银行等单位，他们的浏览器一般都是比较老的。如果我们的用户是这些，那我们写CSS时，就要考虑属性兼容的问题。
2、做到什么程度
一般企业都会从成本和回报的角度去考虑，这个产品做到什么程度。假如产品的重要性我们已经了解，那我们要考虑让哪些浏览器来支持，需不需要老版本的浏览器支持，支持到哪个版本等等都要了解。了解这些过后，我们在做网页开发时，就会有一个清晰的思路，如何让不支持这个CSS属性的浏览器，获得同样支持的浏览器的页面统一。
3、常用解决兼容的方法
一般解决兼容有两个思路，渐进增强和优雅降级。
渐进增强(progressive enhancement): 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 (graceful degradation): 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
二者区别：
“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Chrome等）的前一个版本。
在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 ” 的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。
“渐进增强”观点则认为应关注于内容本身。内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。
“优雅降级”和“渐进增强”都关注于同一网站在不同设备里不同浏览器下的表现程度。关键的区别则在于它们各自关注于何处，以及这种关注如何影响工作的流程。在实际的开发当中分析准确，具有什么功能或者效果的网页，将会给我们的开发工作减少很多弯路。
在具体的开发当中我们一般参考一下几个方法，获得较理想的兼容效果。
方法1：根据兼容需求选择技术框架/库(jquery)。
方法2：根据兼容需求选择兼容工具(html5shiv.js、respond.js、css reset、normalize.css、Modernizr)。
方法3：postCSS
方法4：条件注释、CSS Hack、js 能力检测做一些修补。
四、浏览器兼容的写法举例
以下包含但不限于
1、选择合适的框架
①、Bootstrap (>=ie8) ：即IE 8及以上都可以使用。
②、jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)：jQuery2以下版本，IE6及以后浏览器都能识别；jQuery2以上IE9及以上都能使用。
③、Vue (>= ie9)：IE9及以后版本都能使用。
2、条件注释 (conditional comment)
条件注释是用于HTML源码中被 Microsoft Internet Explorer 有条件解释的语句。条件注释可被用来向 Internet Explorer 提供及隐藏代码。也称：IE hack。
有两种“条件注释”：下层显示 (downlevel revealed)和下层隐藏(downlevel hidden)。
下层显示：<![if 条件]> HTML <![endif]>；
下层隐藏：如上图浅绿色注释颜色的代码，上部分代码表示如果是IE6版本则展示一个p标签；下部分代码表示如果是IE8则引入一个名为ie8only.css的文件。
这里解释一下标准 HTML 注释：标准 HTML 注释：
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯（这样就不会把脚本显示为纯文本）。
3、CSS hack
CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。browserhacks 查 Hack 的写法网站。
（1）属性前缀法(即类内部Hack)：例如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
示列：
background-color:red; /* All browsers */
background-color:blue !important;/* All browsers but IE6 */
*background-color:black; /* IE6, IE7 */
+background-color:yellow;/* IE6, IE7*/
background-color:gray\9; /* IE6, IE7, IE8, IE9, IE10 */
background-color:purple\0; /* IE8, IE9, IE10 */
background-color:orange\9\0;/*IE9, IE10*/
_background-color:green; /* Only works in IE6 */
（2）选择器前缀法(即选择器Hack)。
示例：
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
（3）IE条件注释法(即HTML条件注释Hack)：上文已谈到条件注释，此处不再赘述。
4、常见属性的兼容情况
inline-block: >=ie8
min-width/min-height: >=ie8
:before,:after: >=ie8
div:hover: >=ie7
inline-block: >=ie8
background-size: >=ie9
圆角: >= ie9
阴影: >= ie9
动画/渐变: >= ie10
五、一些和兼容相关的开发利器
1、html5shiv.js：
HTML5 Shiv支持在旧版Internet Explorer中使用HTML5细分元素，并为Internet Explorer 6-9，Safari 4.x（和iPhone 3.x）和Firefox 3.x提供基本的HTML5样式。
2、respond.js：
此脚本的目标是提供一个快速和轻量级（3kb缩小/ 1kb gzipped）脚本，以便
在不支持CSS3媒体查询的浏览器中启用响应式网页设计，特别是Internet Explorer 8及更低版本。
3、css reset：其目的是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。不过，由于出现了更加优秀的Normalize.css，所以css reset基本上被替代了。
4、normalize.css：
Normalize.css只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。
Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。
5、Modernizr：
Modernizr是一套JavaScript 库，用来侦测浏览器是否支持HTML5与CSS3等规格。如果浏览器不支持，Modernizr会使用其他的解决方法来进行模拟。
许多HTML5与CSS 3的功能已经在许多主流的浏览器中实现出来。Modernizr能够告诉开发者，浏览器是否已经实现他们想要的功能。这让开发者在浏览器上可以充分利用这些新功能，或者尝试制作解决方案来支持那些老旧的浏览器。
6、Postcss：
PostCSS是一个使用JS插件转换样式的工具。这些插件可以删除您的CSS，支持变量和混合，透明未来的CSS语法，内联图像等。
注：CSS所有的属性我们都可以在这个网站去查caniuse.com
参考资料：
1、 blog.csdn.net/freshlover/…
2、blog.csdn.net/xiongzhengx…
3、zh.wikipedia.org/zh-hans/%E6…
4、www.w3school.com.cn/tags/tag_co…
5、jerryzou.com/posts/about…
6、zh.wikipedia.org/wiki/Modern…
