ie6 边距扩大 20px答案

【问题标题】：ie6 margin expanding by 20pxie6 边距扩大 20px
【发布时间】：2010-09-29 16:28:48
【问题描述】：

我将 div 包裹在 div 下，我的 html 代码是。

    <div id="content-row">
         <div id="left-box">
              <div id="small-box">
              </div>
              <div id="small-box">
              </div>
              <div id="small-box">
              </div>
              <div id="small-box">
              </div>
        </div>
     </div>

我的css是

/*content-row*/
#content-row {
    margin: 0 auto!important;
    padding-left:50px;
    width:990px;
    height:320px;
    padding-bottom:20px;    
}
#left-box {
    float:left;
    width:360px;
    height:340px;
}
#small-box {
    width:160px;
    height:150px;
    background-color:#fff;
    float:left;
    margin:0px 20px 20px 0px;
}

上面的样式表是 ie6 专用的。我的问题是左框在右侧多出了 20 像素。当我将左框定义为 360px 时；它需要 380px;

这里是完整代码的链接。

http://jsfiddle.net/HXGsT/

代码有什么问题？

【问题讨论】：

将您的 id 更改为类。 id 在 HTML 文档中必须是唯一的。
@Kyle 我无法理解你的意思。你能准确点吗？如果您对我有任何建议，我将不胜感激。谢谢。
你有多个id="small-box";这不是有效的 HTML。 HTML 文档中的每个id 属性必须具有不同的值。另见：webdesign.about.com/od/css/f/blfaqmultiIDs.htm
@Piskvor 我明白了。谢谢你纠正我。

标签： html css internet-explorer-6

【解决方案1】：

它是 IE6 中的一个已知 bg，请参阅此页面了解更多信息： http://www.positioniseverything.net/explorer/doubled-margin.html

基本上，快速解决方法是将display: inline; 也添加到浮动元素。

【讨论】：

【解决方案2】：

回应您的评论：

  <div class="content-row">
         <div id="left-box">
              <div class="small-box">
              </div>
              <div class="small-box">
              </div>
              <div class="small-box">
              </div>
              <div class="small-box">
              </div>
        </div>
     </div>


.content-row {
    margin: 0 auto!important;
    padding-left:50px;
    width:990px;
    height:320px;
    padding-bottom:20px;    
}
#left-box {
    float:left;
    width:360px;
    height:340px;
}
.small-box {
    width:160px;
    height:150px;
    background-color:#fff;
    float:left;
    margin:0px 20px 20px 0px;
}

id #left-box 可以是一个 ID，因为在文档中只有一个带有 id="left-box" 的元素，但由于其他元素是重复的，因此必须使用类来定义它们:)

【讨论】：

虽然不是问题的解决方案，但这是一个非常有效的观点，也是我在网络上看到的越来越多的错误。另外，将 ID 用于样式是非常危险的，因为覆盖所述样式的唯一好方法是在元素上使用内联 CSS。