IE双倍边距BUG的现象及解决办法

创建时间：一月 4th, 2008修改时间：一月 4th, 2008 Traffic(682)

最近有很多人问我：在IE6下设置了几个标签的float和margin属性，但左边距明明设的是5px，怎么出来后就变成了10px，而在FireFox下就，没问题。在解释了这是典型的IE6的双倍边距BUG的现象之一后，并帮助那位朋友解决了问题。

其实，IE6的双倍边距BUG也常常是捆扰初学者的一个难题。下面我总结一下此BUG的现象和解决办法。

第一种，也是最常见的一种就是上面说到的，设置了浮动（float）后再设置外边距（margin），外边距就会是原来值的2倍。请看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>IE双倍边距bug</title> <script type="text/javascript" language="javascript"> function sel(id) {switch(id) {case "1":document.getElementById("sub1").style.display = "block";break;case "2":document.getElementById("sub1").style.display = "inline";break;}} </script> <style type="text/css"> #all {width:260px;height:63px;background-color:#CCC;} .sub { float:left; font-size:12px; line-height:16px; margin:10px 0 0 10px; padding:5px; width:90px; color:#FFF; background-color:#F90; } #sel { margin-top:5px; } select { width:260px; } </style> </head> <body> <div id="all"> <div class="sub" id="sub1">上边距和左边距都是10px</div> <div class="sub">上边距和左边距都是10px</div> </div> <div id="sel"><select onchange="sel(this.value)"><option value="1">块级对象的默认值：block</option><option value="2">强制转换为内联对象：inline</option></select></div> </body> </html>

1、问题：从上面例子中“margin:10px 0 0 10px”可以看出，上边距和左边距同样为10px，但第一个对象距左边有20px。

2、解决办法：当将其display属性设置为inline时问题就都解决了。

3、说明：这是因为块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么第二个对象和第一个对象之间就不存在双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个对象是相对父对象的，而第二个对象是相对第一个对象的，所以第二个对象在设置后不会出现问题。

4、总结：这个现象仅当块级对象设置了浮动属性后才会出现，内联对象（行级对象）不会出现此问题。并且只有设置左边距和右边距的值才会出问题，上下边距不会出现问题。

第二种，也是比较常见的一种。当对象1设置了左浮动，对象2在不设置取消浮动的情况下会浮在对象1的右边。但当对象2不设置浮动时，二者之间会出现空隙。请看下面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>IE双倍边距bug</title> <script type="text/javascript" language="javascript"> function sel(id) {switch(id) {case "1":document.getElementById("right").style.styleFloat = "none";break;case "2":document.getElementById("right").style.styleFloat = "left";break;}} </script> <style type="text/css"> #all { width:240px; padding:10px; font-size:12px; color:#FFF; background-color:#CCC; } #left { float:left; width:100px; line-height:16px; background-color:#F90; } #right { width:100px; line-height:16px; background-color:#09C; } #sel { float:left; margin-top:5px; } select { width:260px; } </style> </head> <body> <div id="all"> <div id="left">第一个对象，正常设置了浮动</div> <div id="right">第二个对象，没设置浮动</div> </div> <div id="sel"><select onchange="sel(this.value)"><option value="1">默认第二个对象不浮动：float:none</option><option value="2">设置第二个对象左浮动：float:left</option></select></div> </body> </html>

1、问题：对象1设置浮动，对象二没设置浮动，在IE6中二者之间会出现间隙。在FireFox下对象2默认是取消浮动换行显示。FireFox下如图：

2、解决办法：设置对象2的浮动“float:left;”。若想使二者间有距离，可以设置外边距margin属性。

如果再遇到什么问题我会及时补充的。欢迎与我交流，也请继续关注我的文章。

Posted by: 郁闷

相关话题：

IE6下图片下边有空隙的解决办法（Traffic：612 | Posted By：郁闷）
让IE6和IE7在WindowsXP下共存（Traffic：568 | Posted By：近水社区）
注释在IE下造成文字溢出（Traffic：526 | Posted By：郁闷）

上一篇：W3C网站模板？下一篇：文字垂直居中

Comments(1)

受教了～～～对初学都非常有用啊～～

一月 10th, 2008Posted by: gelan14gelaninwind#163.com

IE双倍边距BUG的现象及解决办法

Comments(1)

话题搜索

文章推荐

留言修改：