Internet Explorer 6 和 7 中的侧边栏覆盖页脚答案

【问题标题】：sidebar covers footer in internet explorer 6 and 7Internet Explorer 6 和 7 中的侧边栏覆盖页脚
【发布时间】：2010-12-23 12:28:38
【问题描述】：

我为wordpress设计了一个模板，问题是当侧边栏变长时，其中一些会覆盖internet explorer 6和7的页脚，网址是：http://blog.baabak.ir（波斯语），但如果你在 Internet Explorer 6,7 中查看它，您会看到侧边栏徽标将覆盖页脚，例如在此页面中：

http://blog.baabak.ir/?page_id=141

但是网站在其他浏览器下没问题，是什么问题？

【问题讨论】：

问题是主要内容 div 的下边距为负数，我将其删除，现在已修复 :)

标签： wordpress internet-explorer-7 footer sidebar

【解决方案1】：

当你在CSS中使用float时，你必须确保使用clear:both;

您的 <div id="main_content"> 不应浮动。

只有侧边栏应该设置为float:left，如果你想要右侧边栏，你应该设置float:right。

请参阅tutorial 如何进行两柱液体设计。

+---------------------------------------------+
+ HEADER (no float)                           +
+---------------------------------------------+
+ Sidebar float:left + content (no float)     +
+---------------------------------------------+
+ footer (no float)                           +
+---------------------------------------------+

现在你的页面是这样的

+---------------------------------------------+
+ HEADER (no float)                           +
+---------------------------------------------+
+ Sidebar float:left + content (float:right)  +
+---------------------------------------------+
+ footer (no float)                           +
+---------------------------------------------+

这会造成你的问题

【讨论】：

我用过 clear 但在 Internet Explorer 6,7 中没有效果
@Datis：我添加了一些细节看看。
我在 main_content div 之后添加了 clear 但不起作用！
@Datis：你还需要更多
thnx，但是如果我从主要内容中删除浮动，整个页面将崩溃！我认为这是因为我的内容的方向（rtl）！

【解决方案2】：

将两列包装在一个 div 中，并将其设置为像页眉和页脚一样清除。

【讨论】：

【解决方案3】：

不确定这是否仍然有效，但由于我在 Google 上发现这很容易，其他人也会这样做。我完全同意清除浮动，这很重要，但是如果您的侧边栏是： position:absolute; 可能会出现另一个“问题”。或侧边栏的任何位置，这就是问题所在。

即就我而言，我有这个：

#sidebar {
    margin: 120px 0 0 0;
    float: right;
    width: 235px;
    left: 733px;
}

侧边栏位于我想要的位置，它“推动”页脚而不是溢出它，或者在某些情况下进入。

【讨论】：