css - IE でのこの単純な CSS の何が問題になっていますか?

Question

内部コンテンツを持つ div、div の内側にある境界線を持つ div があります。どういうわけか、この div は次の div を包含するように拡張されます。それは私の心を吹き飛ばします。

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

この原因と解決方法が気になります。

score 2 · Accepted Answer

あなたは EVIL である過渡的な quirksmode にいるようです。

Strict はこれを解決します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

score 0 · Accepted Answer

内側の div にセミコロンがありません。最後のセミコロンを省略すると、非常に奇妙な動作が見られます。

<div style="border: 1px solid black; background: green;">green background</div>

使用している IE のバージョンは不明ですが、これは IE7 で動作します

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

score 0 · Accepted Answer

答えは非常に簡単です。さまざまな div をネストしていて、どれも高さがないため、IE6 のオーバーフローが発生します。これを行う：

<div style="background: yellow;height: 1%;">

そしてそれはうまくいきます。

score 0 · Accepted Answer

最初の div に「レイアウトを与える」必要があります。IE6 のターゲットスタイルを使用してこれを行うことをお勧めします。

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

これは hasLayout 属性に関する IE6 の既知の問題です。詳細については、こちらをご覧ください - http://www.satzansatz.de/cssd/onhavinglayout.html

score 0 · Accepted Answer

解決策の 1 つは、"position: relative" をあらゆる場所に配置することですが、これによりページ内の他の部分が壊れてしまいます。

css - IE でのこの単純な CSS の何が問題になっていますか?

5 に答える 5

Related

Reference