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添加float并从侧边栏div移除浮动并在主div之后移动它来获得类似的效果。

Answer 2

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

Answer 3

宾果！固定！提到玩宽度和边距的人今晚得到了金色的明星。事实证明，我所要做的就是删除主div上的固定宽度，然后在右边添加一些填充以创建文本和图像的装订线。在FF3，Chrome，Safari（Win）中进行了测试和确认，最重要的是IE6＆amp; IE7（即使我仍讨厌IE）。

我猜IE渲染引擎说：“我看到你希望你的主要div宽度为850px，但是那个侧边栏你被困在那里，我没有空间所以我不得不把它推到下面侧边栏“。当然，每个其他浏览器的渲染引擎都会说：“伙计，我完全得到了你想要做的事！没问题，我会按照你的意愿布置一切。”

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

3 个答案: