изменение в типе документа приводит к тому, что веб-страница отображается иначе - PullRequest
3 голосов
/ 04 февраля 2012

У меня есть веб-страница, на которой ранее не было объявления типа документа.

Теперь я добавил <!doctype html> в начало.К сожалению, теперь он отображается по-другому.

Существует div, который должен заполнять страницу по вертикали;теперь он заполняет только верхнюю половину страницы (нижняя половина пуста).

Вот CSS-код div:

#thediv {
    float: left;
    width: 48%;
    height: 95%;
    margin: 2px 2px;
}

Мои вопросы:

  • как мне получить div для повторного заполнения всей страницы по вертикали? (более важно)
  • вызывает ли добавление <!doctype html>, что браузер пытается отобразить его как HTML5?
  • почему изменение типа документа может вызвать такую ​​разницу? (менее важно)

Ответы [ 4 ]

9 голосов
/ 04 февраля 2012

Вам нужно будет установить высоту тегов <html> и <body> (и любых других тегов, которые также содержат #thediv до 100%:

html, body {
    height: 100%;
}

Тип документа заставляет страницу отображаться в стандартном режиме, а не в режиме причуд. Я рекомендую прочитать о режиме причуд в блоге с таким же именем и на странице doctype .

Краткая сводка проблемы такова: в бурные времена Интернета, когда ни один из браузеров, которые все еще существовали до сегодняшнего дня, не были выше версии 4, каждый браузер отличался тем, что отличается от - не будучи более точным совместимый. Когда производители браузеров согласились соблюдать одну и ту же спецификацию, они также решили продолжить поддерживать более старые способы создания веб-страниц (режим причуд), чтобы старые страницы по-прежнему правильно отображались в новых браузерах. Этот причудливый режим все еще встроен в большинство браузеров - они активируют его, когда обнаруживают страницу, которая выглядит так, как будто она была создана в те безумные дни. Метод обнаружения и разрешения каждого браузера отличается - вот пример IE 8 .

5 голосов
/ 04 февраля 2012

Без DOCTYPE вы переводите браузер в режим Quirks :

Другими словами, все браузеры нуждались в двух режимах: режим причуд для старых правила, строгий режим для стандарта. IE Mac был первым браузером реализовать два режима, и IE Windows 6, Mozilla, Safari и Opera последовал примеру. IE 5 Windows, а также более старые браузеры, такие как Netscape 4, навсегда заблокированы в режиме причуд.

Для выбора используемого режима требуется триггер, и этот триггер был находится в «переключении доктайпа». Согласно стандартам, любой (X) HTML документ должен иметь тип документа, который говорит миру в целом, который разновидность (X) HTML, которую использует документ.

Причудливый режим - это, по сути, социопатический режим, в который браузеры входят, если вы забыли сказать им следовать определенному DOCTYPE. В большинстве случаев IE - худший из всех, и все чертовски плохо, когда вы забыли определить DOCTYPE с IE:

  • Взаимодействия JQuery с DOM становятся крайне медленными, так как IE не реализует многие функции DOM в режиме Quirks.
  • Все выглядит неправильно.
  • Держись от этого подальше. Ты будешь таким счастливее.
0 голосов
/ 04 февраля 2012

Всегда, всегда , ВСЕГДА используйте <!DOCTYPE __> перед .

Затем создайте свою веб-страницу.

В противном случае вы не можете ожидать, что это сработает.

0 голосов
/ 04 февраля 2012

Да, <!doctype html> - это тип документа для html5

http://www.w3schools.com/html5/tag_doctype.asp

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

Попробуйте этот тип документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
...