浏览器兼容性

浏览器的兼容问题总结

1、在IE6下，子级的宽度会撑开父级的宽度，所以盒模型的宽度一定要设置的精确，否则在IE浏览器下会显示不同。

2、在IE6，7下，元素通过浮动排在同一排，就需要给这行元素都加浮动，而不能一个使用浮动，另一个使用margin-left，否则排在一排的元素会有3px的间距。

3、注意标签的嵌套规则，p标签中不能嵌套块级元素

4、在IE6下，元素的高度如果小于19px，会被当成19px来处理。解决方法：overflow：hidden；

5、在IE6下，不支持1px的dotted边框样式，支持2px的dotted样式。解决方法：切背景平铺。

6、div的小脾气的解决方案在IE6中都不好使。解决方案：zoom：1   触发父级的haslayout属性

7、IE6下双边距的bug，在IE6下块元素有浮动有横向的margin值时，横向的margin值会扩大两倍。解决方案：display：inline；将块级元素转换成内联元素即可。

8、在IE6，7下，li本身没有浮动，li里面的内容有浮动，li下会产生一个间隙。解决方法：a、给li加浮动  

                                                                                                                      b、给li加vertical-align：top；

 

9、在I6下最小高度的bug和li间隙问题共存的时候，给li加浮动，vertical-align不好使

10、当一行子级元素宽度之和和父级的宽度相差超过3px，或者子级元素不满行的情况时候，最后一行的子级元素的margin-bottom会失效，当前还没有解决办法，只能去避免

11、在IE6下的文字溢出bug，子元素的宽度和父级的宽度如果相差小于3px的时候，两个浮动元素中间有注释或者内联元素，就会出现文字溢出，内联元素越多，溢出越多。

解决办法：用div把注释或者内联元素包起来

12、在IE6下，当浮动元素和绝对定位元素是兄弟关系的时候，绝对定位会失效

解决方法：不让浮动元素和绝对定位元素是兄弟关系，用div或者其他标签把a标签包起来

13、在IE6，7下，子元素有相对定位，父级overflow包不住子元素。解决方法：给父级也加相对定位position：relative；

14、在IE6下，如果绝对定位的父级宽高是奇数的时候，子级元素的right和bottom值会有1px的偏差。没有解决办法，只能避免

15、在IE6下，固定定位position：fixed不兼容，需要用js来做兼容

16、透明度 谷歌浏览器中opacity：0.5；

                IE6，7，8中filter：alpha（opacity=50）；

17、在IE6，7下，输入型的表单标签控件上下会有1px的间隙，处理方法：给input加浮动

18、png图片在IE6下不兼容。用js来做兼容