Divタグ内のdivタグはFirefoxやChromeでは機能しません

これは信じられないほどシンプルですが、divタグをFirefoxやChromeに正しく表示されない理由は何ですか？、しかし、 IE6で動作しますか？???コードは以下の通りである：Divタグ内のdivタグはFirefoxやChromeでは機能しません

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body> 
<div id="container"> 
    <div id="nav"> 
     <p>Hello</p> 
    </div> 
</div> 
</body> 
</html>

CSS：コンテナはit..whatの内側にDIVタグを与える拡大されていないかのようにstyle.css

body { 
    background:white; 
    font-family: sans-serif; 

} 
#container { 
    margin:0 auto; 
    width:960px; 
    background:#e3e3e3; 
    border:1px solid black; 
} 
#nav { 
    padding:10px; 
    margin-top:10px; 
    float:left; 
    width: 400px; 
    height:100px; 
    background:white; 
    border:1 px solid black; 
}

それはですか？

出典

2011-09-15 Alkemee

これは、人々はCSSで直面する共通の課題です。あなたが何かを浮かべるときはいつも、あなたが見ているように親は崩壊します。次の方法で、それを回避することができます隠されたまたはオーバーフロー：

は、コンテナ
プット・オーバーフローに明示的な高さを設定するコンテナの自動
はclearfixハックを使用します。http://nicolasgallagher.com/micro-clearfix-hack/

私は、ほとんどの場合、＃2が最も簡単で最良であることがわかります。オーバーフロー時には＃3を使用します：hidden/autoには望ましくない副作用があります。

出典

2011-09-15 18:42:31

これは大変感謝していますので、私は基本的なことを忘れてしまいました。私はWeb開発に着手しました。 – Alkemee

これはCSSの奇妙な側面です。一度このことを理解すれば、他にもいくつかの癖があります。 –

overflow: hidden#containerの場合。

これはフローティングの既知の制限の1つです。

前：http://jsfiddle.net/N669N/
後：http://jsfiddle.net/N669N/1/

出典

2011-09-15 18:40:34

なぜ賛成ですか？ –

#nav divの左を浮かべているので、それはあります。浮動小数点要素は浮動小数点であり、浮動小数点数をクリアしてその下にボックスを固定しない限り、高さはありません。

.clear { clear: both }

浮動小数点以下のdivを追加してクリアします。

<div id="container"> 
    <div id="nav"> 
     <p>Hello</p> 
    </div> 
     <div class="clear"></div> 
</div>

はclearfixes上の非常に詳細な回答のために、このSO質問を参照してください： What methods of ‘clearfix’ can I use?は

出典

2011-09-15 18:42:01 smdrager

これはうまくいきますが、余分なマークアップが望ましくないことがわかりました。 –

合意。私は最高のクリアフィックスハックに関する質問へのリンクで私の答えを編集しました。 – smdrager

Divタグ内のdivタグはFirefoxやChromeでは機能しません

答えて

関連する問題