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

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">

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

Другие советы

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

Strict решает эту проблему.

<!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, и ни один из них не имеет высоты, поэтому для IE6 есть переполнение.сделай это:

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

и это будет работать просто отлично.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top