css - IE7 で親 div が伸びないようにする方法

Question

<style type="text/css">

    .parent 
    {
        width            : 200px;
        height           : 50px;
        background-color : #FFFFCC;
        overflow         : visible;
    }

    .child 
    {
         width            : 255px;
         height           : 30px;
         background-color : #CCCCFF;
    }

</style>

<div class="parent">
    <div class="child">Child Content</div>
</div>

Firefox では問題なく動作しますが、IE7 では親 div が子 div と一緒に伸びています。IE7が親divを伸ばすのを止める方法はありますか? 一部の設計上の制約では、div を配置できません。

Answer 1

<!DOCTYPE>HTMLの先頭に追加するだけで問題は解決しました。

DOCTYPE が宣言されていない場合、Internet Explorer は明らかにデフォルトで「quirks」モードになります。

さらに詳しい情報を確認するには、 CSS quirks モード

Answer 2

子供に次のスタイルを与えるようにしてください。

.child 
    {
         width            : 255px;
         position         : relative;
         height           : 30px;
         background-color : #CCCCFF;
    }

Answer 3

親コンテナに変更overflow:visible;することをお勧めします。overflow:hidden;これがあなたが望むものかどうかは完全にはわかりません。