自己总结的浏览器常见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;