16

1) CSS スタイルが HTML ページに適切に適用されません。HTML5、HTML4.1 strict などの特定のバージョンを HTML に追加すると、すべての 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 with XHTML?

4

2 に答える 2

25

doctype がない場合、 quirks モードがトリガーされます。これは、人々が doctype を使い始める前に作成された「レガシー コード」の下位互換性のみを目的としています。ほとんど使用しないでください。常にDoctypeを宣言する必要があります。

どちらを選ぶ？

この時代では、これだけで十分です。

<!DOCTYPE html>

必要に応じて、この doctype で XHTML 構文を引き続き使用できます。CSS に関する限り、doctype が異なる限り、私が認識している違いはありません。ただし、Doctype は、どの属性と要素が有効で、どのコンテキストで有効かを変更します。W3C Validatorを使用して HTML をテストします。

残念ながら、これは CSS の多くを標準モードで動作するように書き直すことを意味します。雑用のように聞こえることはわかっていますが、弾丸を噛んで書き直す必要があります。

前進するための重要な注意: インライン CSS を削除し、代わりに外部スタイルシートを使用してください。

興味深い: http://hsivonen.iki.fi/doctype/#choosing

Doctype の選択

テキスト/html

簡単に言うと、新しい text/html ドキュメントの Doctype を選択するための簡単なガイドラインを次に示します。

標準モード、最先端の検証

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

これにより、Almost Standards モードが提供されます。後で HTML5 (したがって、完全な標準モード) に移行すると、テーブル内のスライスされた画像に基づくレイアウトが壊れる可能性があることに注意してください。あなたは故意に癖モードが欲しい

文書型がありません。

これをしないでください。Quirks モードの意図的な設計は、将来、Windows IE 6 のことさえ気にしなくなる (すでに Netscape 4.x と IE 5 のことは誰も気にしていない) ときに、あなた、同僚、または後継者を悩ませることになるでしょう。Quirks モード用に設計するのは悪い考えです。私を信じて。

それでも Windows IE 6 をサポートしたい場合は、他のブラウザーを Quirks モードに戻すよりも、条件付きコメントを使用して特定のハックを適用することをお勧めします。

XHTML を text/html として提供することは有害であると考えられているため、XHTML doctype のいずれもお勧めしません。とにかく XHTML doctype を使用することを選択した場合、XML 宣言により IE 6 (IE 7 ではなく!) が Quirks モードをトリガーすることに注意してください。

于 2012-04-30T08:10:29.150 に答える
14

問題は、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>
于 2012-04-30T08:18:10.220 に答える