Вопрос по html5, html, css, css3 – Стили CSS не применяются должным образом, если использовать DOCTYPE

11

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

My HTML code(Display properly without DOCTYPE):

<code><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>
</code>

My HTML code(background color red not applied with DOCTYPE):

<code><!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>
</code>

Кроме того, я попробовал вместо HTML5 строгий XHTML 1.0,

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

а также,

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

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

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

Ваш Ответ

2   ответа
9

Проблема в том, что для div установлено значение 100% от 100% (body), это имеет значение для нас, но не для браузера. Если вы установите абсолютное положение тела и установите его сверху, снизу, слева, справа на 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>
Error: User Rate Limit Exceeded
20

Отсутствие доктрипа вызываетрежим причуд, которая предназначена только для обратной совместимости для «устаревшего кода»; это было создано до того, как люди начали использовать типы документов. Он почти никогда не должен использоваться; Вы всегда должны объявлять тип документа.

Which one to choose?

В наше время это все, что вам нужно:

<!DOCTYPE html>

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

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

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

Представляет интерес:http://hsivonen.iki.fi/doctype/#choosing

Choosing a Doctype

text/html

In a nutshell: Here are simple guidelines for choosing a doctype for a new text/html document:

Standards mode, cutting edge validation

<!DOCTYPE html>

This is the right thing to do unless you have a specific reason to avoid it. With this doctype, you can validate new features such as <video>, <canvas> and ARIA. Please be sure to test your page in the latest versions of the top browsers. Standards mode, legacy validation target

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

This doctype also triggers the standards mode, but lets you stick to legacy validation in case you want to avoid new features or more precise validation of old features. You’d like to use the Standards mode, but you use sliced images in table layouts and don’t want to fix them

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

This gives you the Almost Standards mode. Please note that your layouts based on sliced images in tables are likely to break if you later move to HTML5 (and, hence, the full Standards mode). You willfully want the Quirks mode

No doctype.

Please don’t do this. Willfully designing for the Quirks mode will come and haunt you, your coworkers or your successors in the future—when no one even cares about Windows IE 6 anymore (already no one cares about Netscape 4.x and IE 5). Designing for the Quirks mode is a bad idea. Trust me.

If you still want to support Windows IE 6, it is better to apply specific hacks for it using conditional comments than to regress other browsers into the Quirks mode.

I am not recommending any of the XHTML doctypes, because serving XHTML as text/html is considered harmful. If you choose to use an XHTML doctype anyway, please note that the XML declaration makes IE 6 (but not IE 7!) trigger the Quirks mode.

Error: User Rate Limit Exceeded<section>/heading thingError: User Rate Limit Exceededother articleError: User Rate Limit Exceededspacer.gifError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededstackoverflow.com/questions/6857976/…Error: User Rate Limit Exceeded

Похожие вопросы