兼容性问题

1、 滤镜效果(不透明度设置)：

div{filter:alpha(opacity=50);}/* for IE8 and earier */

div{opacity:0.5}/* for IE9and other browsers */

2、IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在 IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效 果；全兼容的inline-block:

div{display:inline-block;*display:inline;*zoom:1;}

3、word-wrap：normal | break-word

normal：允许内容顶开或溢出容器；break-word：内容将在边界内换行，单词内部允许断行。

css3中将word-wrap改名为overflow-wrap，使用overflow-wrap时最好也使用word-wrap做到向前兼容。

4、IE6 margin加倍问题

设置float的div在加margin值的时候在IE6下会出现margin值加倍的现象，解决办法将该div的display设置为inline;

例：<div class="marDiv"></div>

设置样式：.marDiv{float:left;margin:5px;/*IE6下解析为10px;*/display:inline;/*解析为5px;*/}

5、浮动IE产生双倍距离，解决办法：设置display为inline;

6、div浮动IE6文本产生3px的bug,左边对象浮动，右边对象内的文本会离左边有3px的间距。举例如下：
<style>
*{font-size:14px;}
.one {float: left; 100px; border: solid 1px red;}
.two {border: solid 1px red;}
* html .main .one{ margin-right: -3px; }/* 关键语句 */
</style>
<div class="main">
  <div class="one">hello</div>
  <div class="two">hello</div>
</div>