浏览器兼容性问题

一、常见兼容性问题
1.双倍浮动bug
描述：块元素设置了float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，并且是2倍关系.
解决方案：给浮动的块元素添加display:inline;

2.表单元素行高不一致
解决方案：给表单元素添加float或vertical-align:middle;

3.在IE6中不能识别较小高度的容器（一般为小于18px）;
注：较小不是最小
解决方案：给元素添加overflow:hidden;

4.在IE6中不能识别min-height属性
解决方案：a) min-height:100px; _height:100px;
b)min-height:100px; height: auto !important: height:100%;

5.a标签里嵌套img标签时，有些浏览器(IE浏览器)不会出现有颜色的边框
解决方案：img{border:none;}或img{border:0;}

6.图片默认有间隙
解决方案：img{float:left;}或img{display:block;}

7.在IE8及以下浏览器中不能识别opacity属性
解决方案：filter:alpha(opacity=数值）取值范围：0-100；

8.鼠标指针bug
描述：cursor:hand;在IE8及以下浏览器支持，其它浏览器不支持
解决方案：cursor:pointer;
将鼠标指针的形状设置为手型，所有浏览器都支持

9.百分比bug
描述：在IE6下，百分之五十加百分之五十四舍五入大于百分之百
解决方案：给右边浮动的元素设置clear:right;

10.上下margin重叠问题
描述：给上面和下面的元素同时设置了margin-bottom和margin-top;只能识别其中较大的值.
解决方案：a)margin:top和margin:bottom;只设置其中一个值；
b)给其中一个元素外层嵌套一个盒子，并设置overflow:hidden;触发BFC，给里面的元素创建一个块级格式上下文

11.假传圣旨
描述：给子元素设置的margin值运用在了父元素上
解决方案：a)把给子元素设置的margin值改为给父元素设置padding
b)给父元素设置overflow:hidden;或float:left;触发BFC；
c)给父元素设置透明边框，即 border-top:1px solid transparent;