常见浏览器兼容问题

1、标签和body有默认的padding和margin

解决方法：在css样式开头设置margin与padding为0

 

2、IE6中显示横向margin加倍

满足条件：① 在IE6.0下

　　　　　② 有横向的margin

　　　　　③ 有float(浮动）

　　　　　④ 块属性

解决方法：给浮动的块属性元素加一个display:inline;使得产生bug的四个条件不能同时满足。

注：display：inline 使得被赋予属性的元素以行元素形式显示，相对的是display：block；使元素以块属性显示。

 

3、IE6.0下有默认行高

解决方法：多设置一条属性 overflow：hidden；

注：overflow：hidden;具有清除标签内部浮动的作用。

 

4、无序列表（ul li）和有序列表（ol li）中的 li 如果在不浮动的情况下，父级标签又没有设置高度，在IE6.0和IE7.0会多出几像素。

原因：在IE6.0和IE7.0中，li 设置了宽高，li 内标签float

解决方法：① li 不设置宽和高

　　　　　② li 里面的标签不能有浮动

 

5、各个浏览器下 img 有空隙产生

解决方法：让图片浮动。

 

6、a 标签嵌套 img 时，在不同浏览器会出现不同边框

解决方法：对 a 下的 img 加上 border：none; 

 

7、一个父级标签与几个子级标签嵌套，子标签float父标签不浮动

解决方法：①在子标签最后清除浮动

               <div class="a">float的子标签</div>

　　　　　 <div class="a">float的子标签</div>

　　　　    <div class="a">float的子标签</div>

　　　　　 <div class="clear" style="clear:both">&nbsp;</div>

　　　　　②对父级标签设置overflow:hidden. 利用浏览器解析机制，将父标签撑大。

 

总结：

1、BUG经常出现在IE6.0当中，由于IE6.0有着巨大的用户群，因此测试网页不得不将其考虑在内

2、很多兼容问题是由于标签的不合理嵌套，标签的使用不规范产生的

3、css样式使用不当也能造成兼容问题