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

|▌冷眼眸甩不掉的悲伤 提交于 2020-02-25 12:32:14

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的作用,会按照默认的优先级顺序来走.

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的作用,会按照默认的优先级顺序来走.

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!