IE7与我的浮动侧边栏不一致

Question

我试图让一个动态调整大小栏漂浮在我的网页右上部分(但头和导航以下),对周围(页面流的主要内容排序,除了一个"L"形"L"的底部真的很厚.侧边栏的宽度和高度因页面而异,因此我无法使用任何硬值.

我的CSS看起来像:

#main {
    width: 850px;
    height: auto;
}

#sidebar {
    width: auto;
    float: right;
}

(加上一些填充,边距和背景颜色代码,我认为是无关紧要的)

我的HTML看起来像:

<div id="wrapper">  
    <div id="header">    /* header stuff */    </div>  
    <div id="nav">       /* nav stuff */       </div>  

    <div id="sidebar">  
        /* my sidebar content, really just an h3 and a ul */
    </div>

    <div id="main">
        /* lots of content here */
    </div>
</div>

我不完全理解为什么我必须首先使用侧边栏div,但是这个代码在FF,Chrome,Safari(Windows)和IE8中运行良好.但是在IE7(和我不关心的IE6)上,主要内容被压低到侧边栏的底部,好像侧边栏div上有"clear:left"(但没有) .

我有一种感觉,这是那些邪恶的IE7非合规性错误之一,特别是因为IE8的行为与其他浏览器完全一样.但我不知道如何解决它.

有任何想法吗？TIA.

Answer 1

首先，确保您使用的文档类型会将 IE7 置于严格模式（有关说明，请参阅http://hsivonen.iki.fi/doctype/ ）。如果这不起作用，则可能需要调整页边距宽度。

之所以必须首先拥有侧边栏 div，是因为 div 是显示为块元素，其后的任何内容都将位于其下方（除非您浮动主 div）。

通过浮动侧边栏 div 并将其放在第一位，浏览器知道它可以将主 div 显示在侧边栏的右侧。您可以通过向主 div 添加左侧浮动并从侧边栏 div 中删除浮动并将其移动到主 div 之后来获得类似的效果。