html - コンテンツdivの背後に隠されたフッターdiv

Question

IE7では機能するがIE8では機能しない次のWebページがあります。

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

clear:bothフッターに追加...

デモ

また、コンテナにもわずかな変更が加えられています。

Answer 2

.column内部に float を含める必要があります.inner_content。

これを行う 1 つの方法は、追加することoverflow: hiddenです: http://jsfiddle.net/thirtydot/GgpaP/3/

これにより、最新のブラウザーでも動作するようになります。

Answer 3

content-classに追加display:inline-blockします (css で)。