IE6 双倍水平外边距BUG以解决方案

最新推荐文章于 2021-07-05 12:42:17 发布

最新推荐文章于 2021-07-05 12:42:17 发布 · 122 阅读

本文探讨了IE6浏览器中出现的双倍水平外边距问题，并提供了详细的解决方案。通过设置display:inline可以有效避免该问题的发生。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://blog.youkuaiyun.com/hedong37518585/article/details/6638997

出现条件：

1、没有设置display:inline的块元素

2、浮动元素

3、设置了水平外边距（浮动的方向和水平外边距设置的方向一致）

4、元素与父容器之间

备注：因为浮动都有其相对应的对象，只有相对于其父容器的浮动才会出现这样的问题。第一个元素是相对父容器的，而第二个是相对第一个兄弟元素的，所以第二个浮动元素不会出现双倍水平外边距问题。而且只有设置水平外边距的值才会出现双倍外边距，垂直外边距没有关系。

解决办法：给浮动块框设置display:inline解决问题

下面是测试代码：

[html]view plaincopyprint? 
   
 <!DOCTYPEhtml> 
 <html> 
 <head> 
 <metacharset="utf-8"/> 
 <title>IE6双倍水平外边距</title> 
 <style> 
 *{ 
 margin:0; 
 padding:0; 
 } 
 .testbox{ 
 background:#CCC; 
 width:100px; 
 height:100px; 
 margin:10px0010px; 
 float:left; 
 display:inline;/*去掉display:inline在IE6下看看效果*/ 
 } 
 </style> 
 </head> 
  
 <body> 
 <divclass="testbox">IE6浮动双倍外边距</div><divclass="testbox">IE6浮动双倍外边距</div> 
 </body> 
 </html> 

原因分析：这个现象仅当块框设置了浮动才会出现，行内框浮动不会出现此问题。因为行内框默认display:inline，给其float后自动就具有块框特性，所以如果是span之类的行内框，浮动后是不需要再单独设置display:inline就可以自动消除双倍水平外边距。

下面是测试代码：

[html]view plaincopyprint? 
   
 <!DOCTYPEhtml> 
 <html> 
 <head> 
 <metacharset="utf-8"/> 
 <title>IE6双倍水平外边距</title> 
 <style> 
 *{ 
 margin:0; 
 padding:0; 
 } 
 .testbox{ 
 background:#CCC; 
 width:100px; 
 height:100px; 
 float:left; 
 margin:10px0010px; 
 } 
 </style> 
 </head> 
  
 <body> 
 <spanclass="testbox">IE6浮动双倍外边距</span><spanclass="testbox">IE6浮动双倍外边距</span> 
 </body> 
 </html> 