IE7与我的浮动边栏不能很好玩

我试图让一个动态大小的边栏浮动在我的网页的右上部分（但低于标题和导航栏），并使页面上的主要内容流动它（除了“L”的底部部分非常厚外，有一种“L”形状）。侧栏的宽度和高度因页面而异，因此我无法使用任何硬性值。IE7与我的浮动边栏不能很好玩

我的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>

我不不完全理解为什么我必须首先使用sidebar div，但是它的代码在FF，Chrome，Safari（Windows）和IE8中运行良好。但在IE7（和IE6，我不关心）中，主要内容会被推到侧栏下方，就好像侧栏div上有一个“clear：left”（但没有）。

我有一种感觉，这是邪恶的IE7违规错误之一，特别是因为IE8的行为完全像其他浏览器。但我不知道如何解决它。

任何想法？ TIA。

来源

2009-06-05 user249493

首先，确保您使用的文档类型将IE7置于严格模式（有关解释，请参阅http://hsivonen.iki.fi/doctype/）。如果不这样做，那可能是因为你需要在边缘宽度上进行一些比赛。

之所以你必须首先使用侧边栏div，是因为div是作为一个块元素显示在它后面的任何东西，它会在它下面（除非你浮动主div）。

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

来源

2009-06-05 02:07:02

我的文档类型：<！DOCTYPE html PUBLIC“ - // W3C // DTD XHTML 1.0 Strict // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> 感谢div订购的解释。 – user249493 2009-06-05 02:31:40

从你所描述的情况来看，这听起来像你的侧边栏表现得好像是一个块元素。也许尝试一些不同的显示选项，如内嵌块。我也会尝试使用宽度最小宽度属性进行试验。很难说。

来源

2009-06-05 02:00:40 Rob

对不起，“display：inline-block”也不起作用。 – user249493 2009-06-05 02:30:37

宾果！固定！那些提到围绕宽度和边缘发挥的球员今晚会得到金牌明星。事实证明，我所要做的就是删除主div上的固定宽度，然后在右侧添加一些填充以为文本和图像创建一个装订线。在FF3，Chrome，Safari（Win）以及最重要的IE6 & IE7中进行了测试和确认（尽管我仍然讨厌IE）。

我猜IE浏览器渲染引擎说：“我看到你想要你的主div是850px宽，但是那个边栏你卡在那里，我没有空间，所以我不得不推它在侧边栏下面“。当然，其他所有浏览器的渲染引擎都会说：“老兄，我完全明白你想做什么！没问题，我会按照你的意愿布置一切。”

来源

2009-06-05 02:37:37 user249493

IE7与我的浮动边栏不能很好玩

回答

相关问题