IE 6-7向下推浮动盘

Question

我在IE7中测试我的网站时遇到了一个问题。我有两个容器，它们应该是相邻浮动的。它在现代浏览器中运行得很好，但在旧版本的IE中，右边的容器被推到左边的容器下面。任何人都能看到问题所在吗？主容器的宽度设置为1000px。下面是两个div的代码：

#content {
    width: 725px;
    float: left;
    margin: 0 25px 25px 0;
    clear: both;
}

#SideBar {
    width: 225px;
    min-height: 500px;
    float: left;
    margin: 0 0 50px 25px;
}

    #SideBar img {
        display: table;
        margin: 20px auto 0 auto;
        border: 0;
    }

下面是html：

<div id="PageWrapper">
<nav id="MainMenu">
</nav>
<header id="Header">
</header>
<section id="PageSlider">

<div id="content">

</div>
</section>
<aside id="SideBar">

</aside>
</div>

您可以在ashbaines.com上查看该网站

该网站适用于识别html5标签。

谢谢

Answer 1

在较旧的IE版本中存在一个边距较大的错误。尝试将浮动元素设置为"display: inline;“

Answer 2

首先修改你的代码，因为你使用了像nav，header，section和aside这样的html5标签，这些标签不被像ie7，ie8这样的老浏览器所支持。所以我的建议是更改你的代码，然后尝试。

看看这段代码

<div id="PageWrapper">
  <div id="MainMenu">

  </div>
  <div id="Header">

  </div>
  <div id="PageSlider">
     <div id="content">

      </div>
  </div>
  <div id="SideBar">

  </div>
</div>