IE7 и Firefox 3 рендеринга - PullRequest
Новая
       35

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

1 голос
/ 02 марта 2009

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

<?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 ]

4 голосов
/ 02 марта 2009

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

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

#body {
    overflow: hidden;
}

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

2 голосов
/ 02 марта 2009

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

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

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

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

1 голос
/ 02 марта 2009

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

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

0 голосов
/ 02 марта 2009

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

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

...