悲催的IE6 七宗罪大吐槽（带解决方法）第一部分

一、奇数宽高

悲剧的IE6啊，为何有如此多bug，但用户市场又那么大，真让我们搞网站的纠结。今天就遇到了一个非常奇怪但又很细节的一个bug，一个外部的相对定位div，内部一个绝对定位的div（right:0），如下图所示：

可是在IE6下查看，却变成了right:1px的效果了，是特效吗，不像：

结果发现只要外部div的高或宽为奇数时，就会出现如上1px的问题，修复问题的解决方案就是把外部div的高或宽设为偶数。

以下是css代码：

#outer {

    width: 609px;/*这里宽度为奇数，bug就出现了！！改成偶数就OK了*/

    height: 300px;

    position: relative;

    background:#CC9900;

    color:#FFF;

}

#inner {

    width: 200px;

    height: 250px;

    position: absolute;

    top: 0px;

    right: 0px;

    background:#FFCC00;

}

以下是html代码：

 <DIV id=outer>

#outer 相对定位

    <DIV id=inner>#inner 绝对定位</DIV>

</DIV>

虽然这只是1px的问题，非常非常细节，但对于那些最求完美网页设计的人来说这个bug是难以忍受的，虽然上面的解决方案有点投机取巧，但我可以告诉你，解决的ie6 bug的方法大部分都这样，勉强用着吧。 

二、双倍边距

IE6 的bug算是让人头疼甚至蛋疼到了极点，有时候他的种种bug会带给你无限的惊奇，有时候一个在其他浏览器上非常完美的网页到IE6上就乱成一团。今天就遇到了这个问题，在firefox上调试页面时页面都没问题，但一到IE6上，吓了一跳，布局完全乱掉。后来发现是IE6下浮动层双倍边距的bug引起的，于是就把问题整理了一下，分享给大家，相信写网页的朋友一定会遇到这种神奇的事情的。

1、bug问题描述：

一个浮动的div在IE6下可能会产生双倍边距的bug问题，具体产生的条件是：如果左浮动，则左边距加倍；如果右浮动，则右边距加倍。见下图：

正常的情况下margin-left是50px

IE6下margin-left变成了100px，加倍了：( 

2、解决办法：

解决办法也很简单，只要给浮动层加一个css属性display:inline即可解决问题。