Question

我有以下网页在IE7中有效但在IE8中无效;

HTML：

<div class="content">

    <div class="inner_content">
        <div class="column">
            <div class="widget">
                1
            </div>
        </div>
        <div class="column">
            <div class="widget">
                4
            </div>
        </div>
        <div class="column">
            <div class="widget">
                7
            </div>
        </div>
    </div>

</div>

<div class="footer">
    <div class="inner_footer">
        footer
    </div>
</div>

CSS：

.inner_content, .inner_footer
{
    width:983px;
    margin:auto;
    padding:10px;
}

.content
{
    background:#FFFFFF;
}

.footer
{
    background:#BBBBBB;
}

问题：

由于某种原因，页脚div在IE8中位于内容div下方，但在IE7中则不在。如何在IE8中看起来和在IE7中看起来一样？ IE7看起来就像我希望它看起来一样。

的jsfiddle：

http://jsfiddle.net/GgpaP/

Answer 1

您需要在.column内包含已浮动的.inner_content。

执行此操作的一种方法是添加overflow: hidden：http://jsfiddle.net/thirtydot/GgpaP/3/

这也可以在现代浏览器中使用。

Answer 2

将clear:both添加到页脚...

<强> DEMO

还对容器进行了轻微修改。

Answer 3

将display:inline-block添加到您的内容类（在css中）。

页脚div隐藏在内容div后面

3 个答案: