浏览器兼容写法

• IE条件注释
• 属性选择器
• 选择器前缀法
• 使用兼容工具
• js 修补

兼容问题查询网站： http://www.caniuse.com

IE条件注释

是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码。
（注：IE10不再支持条件注释）

Paste_Image.png

浏览器符合哪一条，那条就生效。

属性选择器

例如 IE6能识别下划线和星号，IE7能识别星号，但不能识别下划线，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。

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

选择器前缀法

原理与属性选择器类似，在选择器前加前缀，只有某些浏览器能识别，以此来针对性的生效。

*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有效等等

使用兼容工具

• html5shiv.js
  IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。所以我们在使用过程中，想要让低版本的浏览器，即IE9以下的浏览器支持，可以使用该工具！
• respond.js
  IE6-8等老版本的浏览器不支持CSS3的媒体查询功能，那么就可以用这个工具，用 js 去实现响应式。
• css reset
  对浏览器的默认样式全部重置，全部推倒重来。
• normalize.css
  标准化CSS，让不同浏览器的CSS样式统一。
• Modernizr
  Modernizr 使你可以方便地为各种情况编写 JavaScript 和 CSS，无论浏览器是否支持这些特性。这是处理渐进增强的完美方案。
  Modernizr 会在页面加载后立即检测特性；然后创建一个包含检测结果的 JavaScript 对象，同时在 html 元素加入方便你调整 CSS 的 class 名。

js 修补

一些简单的兼容问题，可以自己写一段 js 代码去实现该功能