IEでこの単純なCSSの何が問題になっているのですか？

StackOverflow https://stackoverflow.com/questions/367847

質問

インナーコンテンツを持っているの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>

私はこの原因を思ったんだけど、それを解決する方法について説明します。

役に立ちましたか？

解決

あなたは最初のdivに「レイアウトを与える」する必要があります。あなたは、より良い、この使用してIE6はスタイルを目標とします。

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

...

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

このはhasLayout属性で知られているIE6の問題です。ここではそれについての詳細を読む - http://www.satzansatz.de/cssd/onhavinglayout.html

他のヒント

あなたは悪である過渡的quirksmodeにいるように聞こえます。

厳密には、これを解決します。

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

一つの解決策は、「位置：相対」を置くことで、どこでも、これは私のページに他のものを壊し

。

あなたは、内側の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>

あなたのネスト別のdiv要素は、それらをオフどれも高さを持っていないので答えは、verry簡単ですので、IE6のためのオーバーフローがあります。 次の操作を行います。

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

とそれだけで正常に動作します。

所属していません StackOverflow
scroll top