关于浏览器的一些兼容性问题与解决方法

在IE下兼容半透明滤镜

**
例如：

div#box{
  background:red;
  filter:alpha(opacity=50);
}
<div id="box">text</div>

在上述例子中IE8以上是能正常运行的，可是在IE6和7是不起作用的，
div在IE6/7下默认没有hasLayout,没有hasLayout的元素上滤镜是不起作用的，
默认不具有hasLayout的元素是div、span，
可以用css激活元素的hasLayout，只要对应元素添加position/float/width(!auto)/height(!auto)/zoom/overflow即可，
只要添加了以上属性div、span在IE6-7下就可以支持滤镜了；
这里需要注意的是，haasLayout元素呈现为“矩形”。

**

IE6/7下支持display:inline-block

**
只要在需要加display:inline-block的元素下添加
*display:inline;
*zoom:1;
就可以在IE6/7下支持display:inline-block了

**

双边距bug

**
IE6下加了float:left;margin-left:100px;会出现双边距bug，也就是实际的margin-left会变成200px，
解决方法如下：
在对应元素上添加display:inline即可；

**

边界重叠规则

**
水平margin不重叠，浮动元素上下margin不重叠，飘动元素上下margin不重叠，常规折行上下margin重叠；