本文转载自沧海难为水_前端之路的百度空间。

http://hi.baidu.com/zhangqian04062/item/c5603400ecff4419cd34ea3c

相信做前端的童鞋都知道，在整个前端开发过程中，总是IE6问题多多，BUG多多，这点也最让布局者头疼。在这里，就之前工作中遇到的问题做了个总结，借此分享、希望对大家能有所帮助，对于不足之处，还望高手多多指点。

１、浮动元素的双倍margin

说明：这是IE６及其以下版本的一个经典的BUG，触发这个BUG产生的条件是给元素设置了浮动并且同一方向设置了margin值。来看以下代码：

body,div { margin:0; padding:0; }

.wrap { width:300px; height:100px; background:#ccc; }

.float { float:left; width:30px; height:30px; background:#f00; margin:0 0 0 20px;}

</style>

</div>

解决方案：改变浮动元素的显示类型，如.float {display:inline; }

2、浮动元素与非浮动元素相邻时的3像素BUG

说明：这个3像素BUG也是IE6下一个臭名昭著的BUG。一个大盒子中有两个小盒子，其中一个盒子浮动另外一个不浮动，这时在IE６下中间就会有３像素的间距。这里，我们借用问题1中的代码：

body,div { margin:0; padding:0; }

.wrap { width:300px; height:100px; background:#ccc; }

.float { float:left; width:30px; height:30px; background:#f00; margin:0 0 0 20px;}

.floatNone { width:30px; height:30px; background:#f0f; }

</style>

</div>

运行以下代码，你会发现两个盒子中间会有3像素的间距，其实解决方法很简单，让另外一个盒子也浮动就可以了。

或者可以给左边的盒子利用IE6的HACK来设置_margin-right:-3px; ，以清除间距。

3、浮动与绝对定位混用产生的BUG

说明：一个盒子，里面包含了2个浮动的盒子和一个绝对定位的盒子。当设置某些属性值的时候，绝对定位的盒子会在IE6下消失。这种情况并不是每次用到了就会发生，只是当属性设置到一定程度时才会发生，具体的我们来看下面代码：

body,div { margin:0; padding:0;}

.box { width:600px;}

.box1 { position:absolute; left:0; top:0; width:10px; height:10px; background:#f0f; }

.box2 { float:left; width:300px; height:30px; background:#f00; }

.box3 { float:left; width:300px; height:30px; background:#ff0; }

</style>

</div>

运行上而代码，你会发现在IE6中使用绝对定位的那个盒子竟然离奇地消失了，这让很多开必者甚是头疼。由问题2我们知道，浮动与非浮动元素相邻时候，会产生3像素间距，那么这个绝对定位元素的消失与这3像素间距有关吗？（留个疑问，感兴趣的可以自己测试哈）

下面我们来看个体的解决方案：

(1)、给父级盒子加上display:inline;

(2)、浮动元素宽度相加+2<父级宽度，此时可以给浮动元素设置_margin-left:-3px;或者_margin-right:-3px;

(3)、给任意浮动元素前面添加一个空盒子；

(4)、给绝对定位元素外面嵌套一个盒子；

4、鬼影或者克隆文本

说明：父元素的内部有多个浮动；最后一个浮动元素前有隐藏元素（包含注释与属性隐藏）；子元素的宽度与父元素相同，或者父元素的宽度减去子元素宽度小于3像素；

这种现象算是随机产生的吧、有时候也看个人运气，所以目前尚无参考例子可寻哦。。。见谅！

解决方案：

1、去掉注释或者使用条件注释()；

2、给浮动的子元素加上display:inline;属性；

5、overflow:auto;与position:relative;的碰撞

这也BUG也称作“距出边界的BUG”，它只出现在IE６、７中。两个块元素，父元素设置了overflow:auto; 子元素设置了相对定位，当子元素的高度大于父元素的高度时，IE6、7下会产生一个很难看的BUG，怎么个难看法，这里我就不再损他们了，大家还是先来看看代码哈：

</div>

运行代码，大家可以自己测试哈看看差异。^_^

解决方案：给父级元素设置属性position:relative；

6、LI的阶梯BUG

这是一个很有意思的BUG，存在于IE6、7中，当我们在使用UL LI来布局的时候，给LI里面的元素浮动（比如： a），就会出现这种情况；具体我们来看代码哈：

body,ul { margin:0; padding:0; }

li { list-style:none; }

a { text-decoration:none; }

.list { width:300px; height:100px; background:#ccc; }

.list li a { float:left; width:100px; height:25px; line-height:25px; background:#f00;}

</style>

</ul>

不信我说的现象，你可以试试哈。就复制上面代码然后运行瞧瞧

…………

……

怎么样，问题出来了吧？呵呵

遇到这种情况，我想大家也都有自己的解决方法。这里呢？我个人觉得是给LI加浮动比较稳妥，至于A如果要求设置宽高，可以转化为块级元素，这个仅是个人见解。这个实例呢，是在一个论坛中看到的、所以借过来与大家分享一下。

7、LI的空白间距

这出中关于LI的一个BUG，存在于IE６/7中。有时候会无端地在LI与LI间增加一个垂直间距。不多说，先来看看代码吧：

body,ul { margin:0; padding:0; }

.list { width:300px; }

.list li { list-style:none; line-height:30px; }

.list li a { text-decoration:none; background:#f00; display:block}

</style>

</ul>

对于网站中一些比较宽松且设了相近背景色布局，或许你看不出这其中的间距差异问题。那么，现在我们针对这点来做一个demo。大家可以复制代码看看效果；

对了这种情况，解决方案也是多种的。大家见仁见智吧，，下面我列举一下自己平时常用的一些处理方法；

1、给A标签设置宽度（根据实际情况来）；

2、给LI添加属性display:inline;

3、给LI设置1像素的底边线（颜色与背景色一致）；这种方法一般不推荐使用吧，因为一旦背景色是渐变或者其他情况，他就暴露了。如果再用margin-bottom:-1px;来隐藏这条线，那就走远路了，何必舍本逐末呢。。。

前端IE6、IE7 BUG集锦 http://hi.baidu.com/zhangqian04062/item/c5603400ecff4419cd34ea3c

http://hi.baidu.com/zhangqian04062/item/c5603400ecff4419cd34ea3c

继续阅读

龙珠训练营task04

赶工心得（一）

wecenter二次开发系列（一）——使用excel插件批量导入去重的bug

两种清除浮动的方法

一个小小的移动web版音乐播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令详解

Compile workrave under windows &ndash; My exprience 在Windows上编译Workrave

门户通专访草根站长九天狼：做站贵在坚持

如何成为一名.net 工程师?

tabpanel 使用问题

为什么把CSS放头部，script放下面

CSS之折叠菜单

web开发之前后端渲染

DOM下元素 offset client scroll 相关属性简介

IE8 CSS设置DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden