关于IE6浮动双倍间距的那些事

跟往年一样，开年来前几天上班，头晕脑胀，没动力，还沉静在过年的气氛中，加上也没啥事做。在这也先祝大家新年快乐，马年马上加薪，马上有对象。

闲着还是闲着，不如写点东西充实下自己。o(∩_∩)o 。。。

暮然回首，那"IE6"依然在灯火阑珊处，说起IE6，大家都很痛恨之极，但是现在还得眷顾它。

其实先前也写过一片文章“IE6下12个常用bug之解决方法”其中第四点就谈到“IE6浮动双倍间距”的问题，今天就详细的来说下。

我们都知道，IE6浮动双倍margin bug当之无愧是IE6最经典的BUG之一，各位应从未过于其失之交臂吧。为什么会出现这样的情况呢？是什么方式触发的呢？继续往下看吧。

其触发方式是以下二点:

◆ 元素被设置浮动
◆ 元素在于浮动一致的方向上设置margin值

看个简单的例子：

HTML

1. <div id="box">
   

2.    <p>关于IE6浮动双倍间距的那些事</p>
   

3. </div>
   

CSS

1. #box p{
   

2.   float:left;

3.   margin-left:20px
   

4. }
   

demo就不弄了，比较简单。我们很明显的看到IE6下面margin值被翻倍了，变成了40px的空间，而其他浏览器都正常。说到这里，其实还没完呢，我们还可以从此深入研究。如下：

◆ 如果我们加多几个浮动元素会出现什么情况呢，会发现只有第一个元素是双倍的margin，后面几个正常。代码略之。我们得到的结论是：double margin 并不会发生在所有的浮动元素上，同个包含块内，在相同的浮动方向上，它只发生在第一个浮动元素上。

◆ 如果两个浮动元素一个设置为做浮动float:left，一个设置为右浮动float:right，然后分别设置margin，会发现左右两边都是双倍margin值。

◆ 上面说的是横向的，如果我块元素设置为纵向的，设置为左浮动。看以下实例，HTML代码同上，只看以下CSS代码：

CSS

1. #box{
   

2.   -webkit-writing-mode:vertical-rl;

3.   writing-mode:tb-rl

4. }

5. #box p{
   

6.   float:left;

7.   margin:20px 0
   

8. }

会发现margin-top/bottom 两个方向都出现了都翻倍了。

◆ 如果我把元素设置为右浮动【float:left】的，其他的同上，会发现只有margin-bottom方向出现翻倍。

说完以上几点，下面说下解决方法吧，其实很简单，我们只要设置display:inline或者_margin-left:10px，如下：

CSS

1. #box p{
   

2.   float:left;

3.   margin-left:20px

4.   _margin-left:10px  /* 或者display:inline */

5. }

好吧，关于IE6浮动双倍间距的这些事就简单说到这里了。欢迎留言讨论！~