自己总结的浏览器常见bug及解决方案

1，当图片嵌套在一个父元素里而产生的空隙

解决方案：设置其img{

vertical-align:top/middle/bottom;

}

或者将img设为块级元素img{ display:block;}

2在浏览器下由于换行使得图片之间存在一个左右为3px的间距

解决方案：设置img的float属性即img{float:left;}

3.input标签与img垂直方向不对齐问题或者img与文本之间垂直方向不对齐

解决方案:img{vertical-align:middle;}

4.图片在加上超链接后鼠标滑过边框只显示一半的问题

解决方案:在IE6中直接设置a{display:block;}将边框加在a上，a:hover时就可以显示完整的边框了

5.IE浏览器给img加超链接时img会自带一个边框

解决方案:设置img{border:none;}

6.margin:0 auto;对IE6不起作用

解决方案:body{text-align:center;}

7.IE6经典3pxbug 由于浮动元素与非浮动元素同处一行所产生的bug

解决方案:设置非浮动元素浮动

8.给第一个子元素设置margin-top值时会给其父元素设置一个margin-top的值，且子元素相对于父元素的相对位置不变

解决方案：给父元素添加padding-top使其抵消margin-top的值，或者给父元素加上padding:0.1px;

9.浮动元素的父元素高度塌陷

解决方案：1）给父元素添加{overflow:hidden;}

2)在浮动元素的后面加上一个空白div设置{clear:both;}来清除浮动

3）给父元素加一个高度

4）用clearfixed加在产生浮动元素的父元素上，并在全局样式中声明

.clearfixed:after{

content:”.”;

display:block;

height:0;

visibility:hidden;

clear:both;

}

10.opacity定义元素的不透明度（IE不兼容问题）

解决方案：IE浏览器的设置方式为filter:alpha(opacity=80);

其他浏览器直接设置opacity:0.8;