IE7の内側のdivの高さは絶対に配置された外側のdivになりません。準拠モード

ここでは何が起こっているのですか？IE7の内側のdivの高さは絶対に配置された外側のdivになりません。準拠モード

以下のマークアップでは、ウィンドウに合わせて拡大表示され、上下の端が100ピクセル短くなる灰色のdivが作成されます。そして、それは内側のピンクのdivを作成し、それは灰色のdiv全体を満たすはずです。

メタタグは私のIE8のブラウザはIE7標準準拠モードでレンダリングするように強制的に - そしてそれも休憩レイアウト。ピンクのdivは、その親の完全な高さを拡大するために塗りつぶされません。それは約20ピクセルの高さしか示さない。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
     <title></title> 
     <style type="text/css"> 
      #canvas { 
       background-color: #eee; 
       position: absolute; 
       top: 100px; 
       right: 100px; 
       bottom: 0; 
       left: 0; 
      } 
      .fill { 
       background-color: pink; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas"> 
      <div class="fill"></div> 
     </div> 
    </body> 
</html>

最新のブラウザ（FirefoxとChromeのテスト済み）ではすべてが問題なく表示されます。あなたの "CSS" をリセットする

出典

2012-03-09 Mike M. Lin

が位置 '追加：絶対;'内側のdiv要素には、それを整理し、私その理由は分かりません。誰かが提供するものがあれば、私は説明に感謝します。ありがとう。 –

試し：

/* RESET YOUR CSS CODE */ 
*{ margin:0;padding:0;outline:0;height:auto;... bla bla bla ....}

あなたのHTMLドキュメント：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
     <title></title> 
     <style type="text/css"> 
      /* RESET CSS */ 
      *{ margin:0;padding:0;outline:0;height:auto; } 

      /* YOUR CODE */ 
      #canvas { 
       background-color: #eee; 
       position: absolute; 
       top: 100px; 
       right: 100px; 
       bottom: 0; 
       left: 0; 
      } 
      .fill { 
       background-color: pink; 
       height: 100%; 
       width: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvas"> 
      <div class="fill"></div> 
     </div> 
    </body> 
</html>

出典

2012-03-10 04:44:39

応答をありがとうが、問題を解決しません。 –

IE7の内側のdivの高さは絶対に配置された外側のdivになりません。準拠モード

答えて

関連する問題