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

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>

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

IE6兼容性问题及解决办法汇总
1.IE6怪异解析之padding与border算入宽高原因:未加文档声明造成非盒模型解析解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...
IE6 / IE7 / Firefox 的margin问题解决办法
from:http://www.cnblogs.com/zzh/archive/2008/09/03/1283310.html 这两天在做一个网站的布局,因为经常用firefox,所有的内容都是在fi ...
ie6,ie7兼容性总结（转）
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...
ie6,ie7兼容性总结
其实浏览器的不兼容,我们往往是各个浏览器对于一些标准的定义不一致导致的,因此,我们可以进行一些初始化,很多问题都很轻松解决. 下面是14条特殊情况仅供参考: 1. 文字本身的大小不兼容.同样是font ...
html5 ie7兼容性问题,解决浏览器IE6,IE7兼容性的总结
4.最被痛恨的,double-margin bug.ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍.解决方案,给浮动容器定义display:inlin ...
DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
工作中遇到的IE6兼容性问题及解决办法
1.解决IE6下元素左浮动自动换行的问题解决:元素左浮动,宽度自适应:CSS:display: inline-block;overflow: hidden;white-space: nowrap; ...
DIV CSS IE6/IE7/IE8/FF兼容问题汇总
1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...
IE6/IE7/IE8/FF兼容问题汇总，以及解决方案
1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

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

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

最新文章

热门文章