IE7 и Firefox 3 рендеринга

Вот набросок страницы, которую я разрабатываю.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

И CSS:

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

В Firefox 3 разделение тела (с зеленым фоном) практически полностью исчезло, а IE7 прекрасно отображает страницу. Из того, что я могу сказать о стандарте CSS 2.1 (через книгу Мейера О'Рейли), плавающие дивы должны плавать в пределах своего блока контейнера, что явно не так в Firefox 3.

Так что, если рендеринг Firefox соответствует требованиям, что мне не хватает?

Источник

4 ответа

Решение

Ваша проблема в том, что IE7 очищает родительский элемент, чтобы он содержал плавающий дочерний элемент. Это не так, как это должно быть оказано. Лучше объяснения другими авторами.

Простое исправление: применить overflow: hidden; на ваш #body:

#body {
    overflow: hidden;
}

Смотрите этот пост для объяснения.

Источник

Как всегда, когда страница отображается по-разному в Internet Explorer и Firefox, Firefox отображает страницу правильно.

У тела div не должно быть высоты. Он содержит только плавающий элемент, поэтому в нем нет ничего, что могло бы придать ему какую-либо высоту. Плавающий элемент не влияет на размер его родителя. IE делает это растирание и расширяет элемент, чтобы содержать его потомков. Это одна из известных ошибок рендеринга в IE.

Удалите тег XML из кода. Тип документа должен стоять первым на странице, иначе IE его проигнорирует.

Если вы просматриваете страницу в бета-версии IE 8, она будет отображаться точно так же, как Firefox.

Источник

Там нет веса или объема, назначенного div с id="body". Любой текст, помещенный внутри элемента div, придаст ему объем и предоставит цветному фону соответствующий размер. Эта проблема будет работать и в браузерах на базе Webkit (Chrome, Safari).

Либо поместите текст в элемент body, чтобы придать ему вес, либо добавьте стиль переполнения: hidden; в div с id=body.

Источник

Спасибо всем за ваши ответы.

Есть и другое решение, которое также решает мою проблему: плавающий родительский div (id="body"). Это прямо из книги Мейера, поэтому я не уверен, как я это пропустил. Просто еще один пример - учиться! Другое дело, что это также решает еще одну проблему, о которой я не заявлял: как мне разместить поле между телом и нижним колонтитулом? Поскольку в Firefox очистка нижнего колонтитула не позволяет использовать поле, чтобы освободить пространство между телом и нижним колонтитулом. Плавающий родительский элемент, однако, делает.

Источник
Другие вопросы по тегам