【问题标题】: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;
    }
    

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-08-19
      • 2017-07-19
      • 1970-01-01
      • 2012-11-07
      • 2011-10-24
      • 1970-01-01
      • 2011-12-10
      • 2010-10-09
      相关资源
      最近更新 更多