ie6, ie7兼容性问题以及处理办法汇总

jim8757

浏览: 146527 次
性别:
来自: 广州

最近访客更多访客>>

世界杯2009

tangyaham

fengfantasy

examine5191

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

1、IE6中绝对定位位置错误
问题描述：在ie6中，如果参照物没有触发haslayout ，那么绝对定位的容器的left和bottom就会有问题。
解决办法：在相对定位的父容器上加入 zoom:1 来触发ie的haslayout即可解决。
小技巧：通常我们在设置一个容器为position:relative的时候，都会加上zoom:1来解决很多ie下的问题。

2、IE6中绝对定位1像素偏差
问题描述：在 IE6 下定位元素的父级宽高都为奇数时，那么在 IE6 下定位元素的 right和bottom都有1像素的偏差。
解决办法：设为偶数。

<style>
#box1{width:303px; height:303px;border:1px solid black; position:relative;}
#box2{ width:50px; height:50px; background:#7c1; position:absolute;right:-1px;bottom:-1px;}
</style>

<body>
<div id="box1">
	<div id="box2"></div>
</div>
</body>

3、IE6浮动元素双边距bug
问题描述：IE6下块元素有浮动和横向margin的时候，横向的margin值被放大成两倍。
解决办法：给浮动元素加 display:inline。

<style>
body{margin:0;}
.wrap{float:left;border:2px solid #000;}
.box{width:100px;height:100px;background:red;margin:0 100px;float:left;display:inline; }
/*
	IE6下的双边距BUG:
	在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍
	解决办法: display:inline;
*/
</style>

<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>

4、IE67下li底部间隙的BUG
问题描述：在ie67下，li本身没浮动，但是li的内容有浮动，li下边就会产生一个间隙。
解决办法：给li设置 float:left或者给li加vertical-align:top。

<style>
.list{ width:300px;margin:0;padding:0;}
.list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}
.list a{float:left;}
.list span{float:right;}
/*
	IE6，7下li的间隙
	在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙
	解决办法: 1.给li加浮动 或者 2.给li加vertical-align:top;
*/
</style>

<body>
<ul class="list">
	<li>
    	<a href="#">文字文字文字文字文字</a>
        <span>作者</span>
    </li>
    <li>
    	<a href="#">文字文字文字文字文字</a>
        <span>作者</span>
    </li>
</ul>
</body>

5、IE6下最小高度问题

问题描述：在IE6下高度小于19px的元素，高度会被当做19px来处理。

解决办法：设置font-size：0;

<style>
body{ margin:0;background:#000;}
.box{height:5px;background:red; font-size:0;}
/*
	在IE6下高度小于19px的元素，高度会被当做19px来处理
	解决办法:font-size:0; 或者 overflow:hidden;
*/
</style>

<body>
<div class="box"></div>
</body>

6、ie6 下子级的相对定位

问题描述：ie6 下父级的overflow:hidden;是包不住子级的相对定位的。

解决办法：父级也设为相对定位。

<style>
#box1{width:500px; height:300px; background:blue; overflow:hidden;position:relative;}
#box2{width:300px; height:500px; background:yellow; position:relative;}
</style>
</head>
<body>
<div id="box1">
	<div id="box2"></div>
</div>
</body>

7、在IE6下子元素margin问题

问题描述：在IE6下父级有边框的时候，子元素的margin值消失。

解决办法：触发父级的haslayout。

<style>
body{margin:0;}
.box{background:blue;border:1px solid #000;zoom:1;}
.div{width:200px;height:200px;background:red;margin:100px;}
</style>

<body>
<div class="box">
	<div class="div"></div>
</div>
</body>

8、在IE6下的文字溢出BUG

问题描述：子元素的宽度和父级的宽度相差小于3px的时候或两个浮动元素中间有注释或者内嵌元素。

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

<style>
.box{ width:400px;}
.left{float:left;}
.right{width:400px;float:right;}
</style>

<body>
<div class="box">
	<div class="left"></div>
    <div><!-- IE6下的文字溢出BUG --><span></span></div>
    <div class="right">↓leo是个大胖子</div>
</div>
</body>

9、绝对定位元素消失

问题描述：当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失。

解决办法：给定位元素外面包个div。

<style>
.box{ width:200px;height:200px;border:1px solid #000; position:relative;}
span{width:50px;height:50px;background:yellow; position:absolute;right:-20px;top:0;}
ul{width:150px;height:150px;background:Red;margin:0 0 0 50px;padding:0; float:left; display:inline;}
</style>

<body>
<div class="box">
	<ul></ul>
    <span></span>
</div>

10、表单控件1px间隙

问题描述：在IE6，7下输入类型的表单控件上下各有1px的间隙。

解决办法：给input加浮动。

<style>
.box{ width:200px;height:32px;border:1px solid red;}
input{width:100px;height:30px;border:1px solid #000;margin:0;padding:0; float:left;}
</style>
<div class="box">
	<input type="text" />
</div>

11、表单控件加border:none无效

问题描述：在IE6，7下输入类型的表单控件加border:none无效。

解决办法：重置input的背景。

.box{ width:200px;height:32px;border:1px solid red;background:yellow;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:#fff;}
<div class="box">
	<input type="text" />
</div>

12、表单控件背景图片会移动

问题描述：在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动。

解决办法：把背景加给父级。

.box{ width:100px;height:30px;border:1px solid red;background:yellow; background:url(ball.png) no-repeat;}
input{width:100px;height:30px;border:none;margin:0;padding:0; float:left; background:none;}
<div class="box">
	<input type="text" />
</div>

13、ie6下png

问题描述：ie6不支持png24的图片

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{ background:#000;}
.box{width:400px;height:400px;background:url(img/png.png);}
</style>
<!--[if IE 6]>
<script src="DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('.box');
</script>
<![endif]-->
</head>
<body>
<div class="box"></div>
</body>
</html>

分享到：