IE6兼容性问题汇总

最新推荐文章于 2021-08-05 12:10:16 发布

Teacher.Chen

最新推荐文章于 2021-08-05 12:10:16 发布

阅读量350

点赞数

本文链接：https://blog.csdn.net/xymyqueen/article/details/52571943

版权

1.IE6下最小高度问题，以下代码在正常浏览器可以正常显示，但是在IE6下元素高度小于19px，浏览器会当做19px处理

</pre><pre class="html" name="code"><!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				height: 5px;
				background: red;
				font-size: 0px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

解决办法：

该元素添加overflow：hidden

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				height: 5px;
				background: red;
				font-size: 0px;
                                overflow：hidden；
			}
		</style>
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>

2. IE6下1px dotted 不兼容（显示样式不同）

解决办法：切图片平铺
3.IE6下父级有边框的时候，子元素的margin值消失

解决办法：IE6下解决margin传递要触发haslayout

4.IE6下的双边距bug：IE6下，块元素有浮动和横向的margin值会被放大成两倍

margin-right：一排最右侧有双边距，margin-right：一排最左侧侧有双边距， margin：一排最左右两侧有双边距，

解决办法：display：inline

5，IE6，7下li本身没有浮动，若果li里面的内容有浮动，则li下边会产生间隙

解决办法：1）为li添加浮动及宽度，并且还需清浮动（此法较为麻烦，但是当IE6最小高度问题和此问题共存是，必须使用此方法解决

2）给li加vertical-algin：top（简单，height大于19px时使用）·

6.当一行子元素占有宽度之和与父级宽度超过3px，或者有不满行状态时，最后一行的子元素的下margin会消失

解决办法：不要超过

7.IE6下的文字溢出bug ：子元素与父元素的宽度相差小于3px，并且两个浮动元素之间有注释或者内嵌元素的时候，文字会溢出

解决办法：用div将注释或者内嵌包起来

8.当浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失

解决办法：在绝对定位元素外包一个div

9.在IE6，7下，子元素有相对定位的时候，父级的overlow包不住子元素

解决办法：给父级也加相对定位

10.在IE6下绝对定位元素的父级宽高是奇数的时候，元素的right值和bottom值会有1px的偏差

解决办法：最好做成偶数，无其他解决办法

11.IE6不支持绝对定位

解决办法：使用javascript改变top值达到固定的效果

12.透明度的兼容，透明度标准写法

css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8

css3的 rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如rgba(255,255,255, 0.8)

兼容IE678：IE专属滤镜 filter:Alpha(opacity=x)，x 的取值从 0 到 100，如filter:Alpha(opacity=80)

13.IE6下tr和tbody或者thead同时加样式，tr样式会覆盖掉tbody和thead的样式

解决办法：不要tr加样式同时再去加tbody和thead样式

14.在IE67下，输入类型的表单控件上下各有1px间隙

解决办法：为控件加浮动

15.在IE67下输入类型表单控件，border：none失效

解决办法：为控件加背景

16.在IE67下，输入类型表单控件输入文件的时候，背景图片会跟着移动

解决办法：清掉自身背景，将背景图片加给父级

注意：背景加fixed虽然可以解决IE6下的问题，但是IE7下会出现错位

17.IE6不支持png图片

解决办法：使用js库处理（如jquery），库里包含有IE6下处理png图片的方法

但是该方法不能解决body之上的png问题，可以使用filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="1.png");/*for ie6*/}

18.IE6下，在！important后边再加上一条样式，会破坏掉！important的作用，从而按照默认优先级执行

解决办法：保证！important出于最后

Teacher.Chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IE6兼容性问题汇总

1.IE6下最小高度问题，以下代码在正常浏览器可以正常显示，但是在IE6下元素高度小于19px，浏览器会当做19px处理 div{ height: 5px; background: red; font-size: 0px; } 解决办法：该元素添加overflow：hidden
复制链接

扫一扫