IE6下CSS常见兼容性问题及解决方案

1. 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素加浮动。

2. IE6下最小高度问题:在IE6下元素高度小于19px的时候,会被当作19px处理。解决方案:给元素加 overflow:hidden。

3. border:1px dotted #000: 1px dotted 在IE6下不支持
解决方案:切背景平铺

4. margin传递:解决方案:a.父级或自己浮动;
b.给元素加 overflow:hidden;zoom:1;

5. 在IE6下父级有边框的时候,子元素的margin值消失。解决方案:触发父级haslayout(haslayout触发:zoom:1)

6. IE6下的双边距bug:在IE6下,块元素有浮动和横向的margin值,横向的margin值会被放大成两倍。解决方案:display:inline。

7. 在IE6、7下li本身没浮动,但是li的内容有浮动,li下边就会产生一个间隙。解决方案:a.给li加浮动;
b.给li加vertical-align:top ;

8. 当IE6下最小高度问题和li的间隙问题共存时给li加vertical-align:top 和浮动。

9. IE6下当一行子元素占有的宽度子和和父级的宽度相差超过3px,或有不满行状态的时候,margin-bottom就会失效。解决方案:无 (自己注意避免)。

10. IE6下文字溢出BUG: 产生原因:子元素和父级宽度相差小于3px,或两个浮动元素之间有注释或内嵌元素。解决方案:用DIV把注释或内嵌元素包起来。

11. 当浮动元素和绝对定位元素是并列关系的时候,在IE6下绝对定位元素会失效。解决方案:给定位元素外面包DIV。

12. 在IE6、7下,子元素有相对定位的话,父级的overflow包不住自己元素。解决方案:给父级加相对定位。

13. 在IE6下绝对定位元素的父级宽高是奇数的时候,元素的right值和bottom值会有1px的偏差。解决方案:无(自己注意避免)。

14. 在IE6、7下输入类型的表单控件上下各有1px的间隙。解决方案:加浮动。

15. 在IE6、7下输入类型的表单控件加border:none无效。解决方案:重置背景。

16. 在IE6、7下输入类型的表单控件输入文字的时候,背景图片会跟着移动。解决方案:把背景加给父级。

17. IE6下PNG不透明:解决方案:引入JS文件(DD_belatedPNG_0.0.8a.js), 使用语法<script>DD_betatedPNG.fix('PNG图片所在块ID或CLSS名(如#div1,.class2)').


18. 样式优先级:默认<类型<class<id<style(行间)<important 在IE6后面再加一条同样的样式,会破会掉important的作用,会按照默认的优先级顺序来走.

原文地址:https://www.cnblogs.com/netlzl/p/4311866.html