Что не так с этим простым CSS в IE? - PullRequest
Новая
       35

Что не так с этим простым CSS в IE?

0 голосов
/ 15 декабря 2008

Существует 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>

Мне интересно, почему это происходит и как ее решить.

Ответы [ 5 ]

2 голосов
/ 15 декабря 2008

Звучит так, будто вы находитесь в переходном причудливом режиме, который ЗЛО.

Строгий решает это. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
0 голосов
/ 16 декабря 2008

Ответ очень прост, потому что вы вкладываете div-файлы div, и ни один из них не имеет высоты, поэтому переполнение для IE6. сделать это: 

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

и все будет работать нормально.

0 голосов
/ 15 декабря 2008

Вам нужно «дать макет» первому div. Лучше сделать это, используя целевые стили IE6: 

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

...

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

Это известная проблема IE6 с атрибутом hasLayout. Подробнее об этом здесь - http://www.satzansatz.de/cssd/onhavinglayout.html

0 голосов
/ 15 декабря 2008

Вы пропустили точку с запятой во внутреннем 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>
0 голосов
/ 15 декабря 2008

Одним из решений является повсеместное размещение «позиции: относительной», но это ломает другие вещи на моей странице.

...