Question

我把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。我的问题是左框在右侧需要额外的20px。当我将左框定义为360px时;它取380px;

这是完整代码的链接。

http://jsfiddle.net/HXGsT/

代码有什么问题？

Answer 1

这是IE6中已知的bg，请参阅此页面以获取更多信息： http://www.positioniseverything.net/explorer/doubled-margin.html

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

Answer 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"，但由于其他元素重复，因此必须使用类定义：）

ie6保证金扩大20个基点

2 个答案: