一些常见的浏览器兼容性问题

概念：不同的浏览器对同一段代码解析不同造成浏览器显示效果不同，我们把这样的问题叫做浏览器兼容性问题

1.双倍浮动的bug

描述：块元素float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，并且是2倍关系
解决方案：给float的块元素添加display:inline;
           

2.表单元素行高不一致

解决方案：
a) 给表单元素添加一致的vertical-align属性值
b) 给表单元素添加一致的float属性值
           

3.在IE6中，不能识别较小高度的容器(一般为20px)

解决方案：元素{height:1px; overflow:hidden;}
           

4.a标签里嵌套img时，有些浏览器(例如IE浏览器)下会出现有颜色的边框

解决方案：  img{border:0;}  或  img{border:none;}
           

5.在IE6中不能识别min-height属性

解决方案： min-height:100px;  _height:100px;
           

6.图片默认有空隙

解决方案：
a) img{display:block;}
b) img{float:left;}
c) img{vertical-align:bottom;}
           

7.IE8及以下浏览器不能识别opacity属性

解决方案：
元素{
opacity:0.5;
filter:alpha(opacity=50);
}
           

8.鼠标指针bug

描述：cursor:hand;只有IE8及以下浏览器识别，其他浏览器不识别
解决方案：
设置为 cursor:pointer;  所有浏览器都识别，将鼠标指针设置为手的形状
           

9.百分比bug

描述：在IE6下，子元素百分之五十加百分之五十大于父元素设置的百分之百
解决方案： 给右边左浮动的元素添加clear:right;
           

10.上下margin重叠问题

描述：给上下两个元素同时设置了margin-bottom和margin-top，此时较小的那个值会被重叠。
解决方案：给其中一个元素外层嵌套一个盒子，并设置overflow-hidden；触发BFC，给里面的元素创建一个块级格式化上下文，里面元素的margin值便可以正常显示。
           

11.假传圣旨

描述：给子元素设置的margin值传递给了父元素
解决方案：
a)将设置的margin改为padding
b)给父元素设置overflow：hidden；或者float：left；触发BFC
c)给父元素设置1px的透明边框，即：
父元素{border-top:1px solid transparent;}