Разница в рендеринге IE7 и Firefox 3

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

Вопрос

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

<?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 основной элемент div (с зеленым фоном) практически сжимается, в то время как IE7 отлично отображает страницу.Из того, что я могу сказать о стандарте CSS 2.1 (из книги Мейера О'Рейли), плавающие элементы div должны плавать внутри своего контейнерного блока, чего явно не происходит в Firefox 3.

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

Это было полезно?

Решение

Ваша проблема в том, что 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).

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

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

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

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