Question

好的，我有以下布局/ CSS：

div#wrap {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1400px;
}

div#header {
    float: left;
    margin: 50px 15px 0 50px;
    width: 135px;
}


div#blog {
    display: inline;
    float: left;
    margin: 50px 15px 0 50px;
    width: 1080px;
}

div#site {
    float: left;
    width: 100%;
}

使用：

<div id="site">
   <div id="wrap">
      <div id="header"></div>
      <div id="blog"></div>
   </div>
</div>

因此，网站覆盖窗口，'wrap'是固定宽度并且居中，'header'和'blog'位于'wrap'内，具有定义的宽度。

问题与IE6一样。 “博客”显示在“标题”下方。所以浮动和/或边距似乎不起作用。

似乎它不是双边距浮动bug，至少在DebugBar中我看到了正确的边距，但也有一些偏移（标题为50px），实际上我不知道它是什么。无论如何，我试图在'header'和'blog'中添加'display：inline'，但它没有帮助。

我没有看到ie7，但它确实在ie8中正确显示。

我经历了几个关于ie6的浮动bug的教程，但找不到我的问题的解决方案（或者我可能错过了它）。

任何想法如何“治愈”它而不添加额外的div（我希望它可以用css，就像doublemargin bug一样）

p / s /具有余量的div的总宽度是1345 < 1400。

EDIT1：唯一奇怪的是'换行'有0个高度。

Answer 1

EDIT1：唯一奇怪的是'wrap'的高度为0。

请阅读http://www.quirksmode.org/css/clearing.html。但是，由于另一个错误，所描述的问题在IE6中没有出现;浮动自动清除。

另外，为了防止双边距错误，请确保为所有浮动元素定义display:inline。避免将display: inline添加到#wrap，这会导致上一个问题（#blog出现在#header下）。

编辑：我能够在reznikdavydov.com上重现这个问题。在#header内，有<div class=menu>设置了width: 300px。 IE6中的bug导致包装器（#header）被错误地展开，因此div.menu不能溢出它。这就是为什么#header和#blog不能并排放置的原因：#header的计算值在现代浏览器中为135px，在IE6中为300px。解决方案是从width:300px选择器中删除.menu规则。

Answer 2

似乎你有不需要的CSS，我会从这里开始看看它是否有效

div#wrap {
    margin:0 auto;
    width: 1400px;
}

div#header {
    float: left;
    margin: 50px 15px 0 50px;
    width: 135px;
}


div#blog {
    float: left;
    margin: 50px 15px 0 50px;
    width: 1080px;
}

div#site {
    width: 100%;
}

浮动左/边距为两个静态宽度div（ie6）

2 个答案: