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 之后来获得类似的效果。

Answer 2

根据您的描述，听起来您的侧边栏的行为就像是一个块元素。 也许尝试一些不同的显示选项，例如内联块。 我还尝试尝试宽度 min-width 属性。 不过很难说。

Answer 3

答对了！ 固定的！ 那些提到玩弄宽度和边距的人今晚将获得金星。 事实证明，我所要做的就是删除主 div 上的固定宽度，然后在右侧添加一些填充来为文本和图像创建装订线。 在 FF3、Chrome、Safari（Win）以及最重要的 IE6 和 IE6 中进行了测试和确认。 IE7（尽管我仍然讨厌IE）。

我猜 IE 渲染引擎是在说，“我看到你希望你的主 div 宽 850px，但是侧边栏卡在那里，我没有空间，所以我必须将它推到侧边栏下面” 。 当然，其他浏览器的渲染引擎都会说：“伙计，我完全明白你想要做什么！没问题，我会按照你想要的方式布置所有内容。”