Стили CSS не применяются должным образом, если используется DOCTYPE

1) Стили CSS не применяются должным образом к моей HTML-странице, если я добавляю определенную версию на html, такую ​​как HTML5, HTML4.1 strict и т.д. Если я удалю все инструкции DOCTYPE, он отлично работает.

Мой код HTML (нормально отображаться без DOCTYPE):

<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

Мой код HTML (красный цвет фона не применяется с DOCTYPE):

<!DOCTYPE html>
<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

Кроме того, я попытался вместо HTML5, XHTML 1.0 strict,

 <!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">

и

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

Но не работает ни один. Как правильно добавить версию.

2) Также это лучшая версия. HTML5 или html4.01 или HTML 4.01 с XHTML?

ОТВЕТЫ

Ответ 1

Проблема заключается в том, что div установлен на 100% из 100% (тело), ​​что делает это для нас, но не для браузера. Если вы установите абсолютное положение тела и установите его сверху, снизу, слева, справа на 0, вы получите тот же эффект, и настройка высоты div будет работать так, как вы ожидаете. Вот код.

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

Ответ 2

Отсутствие режима doctype triggers режим quirks, который предназначен только для обратной совместимости для "устаревшего кода", который был создан до того, как люди начали использовать доктрины. Он почти никогда не будет использоваться; вы всегда должны объявлять doctype.

Какой из них выбрать?

В этот день и возраст, это все, что вам нужно:

<!DOCTYPE html>

Вы можете продолжить использовать синтаксис XHTML с этим типом документа, если хотите. Что касается CSS, то нет никаких различий, которые я знаю с разными доктринами, если у вас их есть. Однако Doctypes изменяет, какие атрибуты и элементы действительны и в каком контексте. Используйте W3C Validator, чтобы протестировать ваш HTML.

К сожалению, это означает, что вы будете переписывать большую часть вашего CSS для работы в режиме стандартов. Я знаю, что это звучит как тяжелая работа, но вам просто придется укусить пулю и переписать ее.

Важное примечание для перемещения вперед: удалите встроенный CSS и вместо этого используйте внешнюю таблицу стилей, в противном случае (среди прочего) вы обнаружите, что техническое обслуживание является полным кошмаром.

Интересно: http://hsivonen.iki.fi/doctype/#choosing

Выбор Doctype

текст/html

Вкратце: вот простые рекомендации по выбору типа doctype для новый текст /html документ:

Режим стандартов, проверка режущей кромки

<!DOCTYPE html>

Это правильная вещь, если у вас нет особых причин, чтобы избежать ее. С помощью этого doctype вы можете проверить новые функции, такие как <video>, <canvas> и ARIA. Обязательно проверьте свою страницу в последние версии лучших браузеров. Режим стандартов, устаревшая проверка целевой

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

Этот doctype также запускает режим стандартов, но позволяет придерживаться устаревшей проверки, если вы хотите избежать новых функций или более точная проверка старых функций. Вы хотели бы использовать Стандарты, но вы используете нарезанные изображения в макетах таблиц и не хотите исправлять их

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

Это дает вам режим "Почти стандарты". Обратите внимание, что ваши макеты, основанные на нарезанных изображениях в таблицах, скорее всего, сломаются, если вы затем перейдите в HTML5 (и, следовательно, полный режим стандартов). Вы намеренно хочет режим Quirks

Нет doctype.

Пожалуйста, не делайте этого. Умышленное проектирование для режима Quirks придет и преследует вас, ваших коллег или ваших преемников в будущее, когда никто больше не заботится о Windows IE 6 (уже нет один заботится о Netscape 4.x и IE 5). Проектирование режима Quirks это плохая идея. Поверь мне.

Если вы все еще хотите поддерживать Windows IE 6, лучше использовать конкретные хаки для него с помощью условных комментариев, чем для регресса других браузеров в режим Quirks.

Я не рекомендую ни один из доктринов XHTML, потому что служба XHTML поскольку текст /html считается вредным. Если вы решите использовать XHTML doctype в любом случае, обратите внимание, что объявление XML делает IE 6 (но а не IE 7!) запускают режим Quirks.