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

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


css internet-explorer-7 firefox-3
person gvkv    schedule 01.03.2009    source источник
comment
Отметим, что Opera отображает это аналогично Firefox.   -  person strager    schedule 02.03.2009

Ответы (4)


arrow_upward
4
arrow_downward

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

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

#body {
    overflow: hidden;
}

См. Объяснение в этом сообщении.

person strager    schedule 01.03.2009
comment
Я сам всегда использовал overflow: auto, но в связанной статье упоминаются причины использования overflow: hidden в последнем абзаце. Спасибо за ссылку. - person Brant Bobby; 02.03.2009
comment
переполнение: скрыто; определенно мой предпочтительный способ справиться с этим. Это тоже не хакерство, он ведет себя так же, как в спецификации CSS2 указано, что переполнение должно работать: поплавки, элементы с абсолютным позиционированием, встроенные блоки, ячейки таблиц, заголовки таблиц и элементы с «переполнением», отличным от «видимого» (кроме случаев, когда это значение было передано в область просмотра) устанавливают новые контексты форматирования блока. - person Wick; 04.07.2009

arrow_upward
2
arrow_downward

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

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

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

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

person Guffa    schedule 01.03.2009
comment
Спасибо за предупреждение об объявлении типа документа. - person gvkv; 02.03.2009
comment
+1 при удалении (в любом случае избыточного) XML-объявления. Смущает IE, и редко бывает веская причина для его включения. - person bobince; 02.03.2009

arrow_upward
1
arrow_downward

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

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

person ahsteele    schedule 01.03.2009
comment
Да, и это поведение я тоже заметил, когда добавил фиктивный текст в основной блок div. - person gvkv; 02.03.2009

arrow_upward
0
arrow_downward

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

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

person gvkv    schedule 01.03.2009