Question

我在IE7中测试我的网站时遇到了问题。我有2个容器，假设它们彼此相邻。它在现代Web浏览器中工作正常，但在旧版本的IE中，右侧容器被推到左侧。有谁能看到这个问题？主容器设置为1000px宽度。以下是有问题的2个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;”

以下是有关此错误的一些信息： http://www.positioniseverything.net/explorer/floatIndent.html http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 2

首先更改您的代码，因为您使用html5，nav，header和section这样的aside代码，而不是像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>

IE 6-7推下浮动div

2 个答案: