为什么会产生兼容问题

同一段代码，有的浏览器显示正常，有的浏览器却显示不正常，这是因为不同的浏览器会有不同的标准以及实现方式，即使是同一产品，因为版本的不同也会产生差异，有的新功能在低版本上就不会被支持；而有的浏览器自身本来就有bug，以上原因都会产生问题。

处理浏览器兼容问题

通过 caniuse.com 可以查询属性在不同浏览器上的支持率，然后针对不支持该属性的浏览器做出相应的处理。

使用 Hack处理兼容问题

CSS Hack ：通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号，以达到应用不同的CSS样式的目的，Hack的写法可以在browserhacks上查看，CSS Hack大致有三种表现形式：CSS属性前缀，CSS选择器前缀，IE条件注释。

属性前缀与选择器前缀

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

div { width:300px; _width:200px; }

在上面这段代码中，_white:200px这条属性一般的浏览器是无法识别的，而IE6下这条属性是能够识别并且生效，所以一般浏览器下div的宽度为300px，而在IE6下后面的width覆盖了前面的，所以div的宽度为200px。
下面是一个比较常用的案例，IE8以下不支持inline-block，下面的写法则可以最小副作用的在IE8以下模拟inline-block

.target{
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

条件注释

条件注释 (conditional comment) 是于HTML源码中被IE有条件解释的语句。条件注释可被用来向IE提供及隐藏代码，注：IE10及以上不再支持条件注释。

<!--[if IE 6]>
  <p>You are using Internet Explorer 6.</p>
<![endif]-->

上面这段代码会在IE6生效，也就是说，在IE6中，你的代码会出现一个内容为You are using Internet Explorer 6.的 p 标签，而除IE6外的浏览器中会把这段代码当成注释而不会出现这个p标签。

条件注释	范例	说明
！	[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

一些与兼容相关的开发工具

html5shiv
respond.js
normalize.css