[転送] DIV CSS Web ページで CSS が無効である 10 の理由の解釈 Layout_html/css_WEB-ITnose

DIV CSS Web ページレイアウトの知識は 51cto.com で学びますが、W3Cvalidation は操作が難しい場合がありますが、レイアウト設計に起因するエラーをチェックするために使用できます。バリデーターは、XHTML がまだ完成しておらず、異なるブラウザー間では一貫して機能しない可能性があることを示す多くのエラーと警告をスローします。この記事では、多くのプログラマーを悩ませている 10 の微妙な障害の問題について、その解決方法を説明します。この記事を始める前に、W3C バリデーターを使用する際に注意する必要がある問題をいくつか紹介します。

1. 検証プログラムからの警告については心配しないでください。検証プログラムで 12 個のエラーと 83 個の警告が見つかったという場合は、無視して次のステップに進みます。

2. エラーを 1 つずつ修正します: 上から下に順番に作業し、一度に 1 つずつエラーを修正します。 HTML はブラウザで上から下に表示され、これらのエラーは同じ順序で表示されます。
3. コードを修正するたびにコードを更新して、再度有効にします。多くの場合、小さなエラーがページ全体で一連のエラーを引き起こします。したがって、「エラーの修正」を誤ると、さらに多くのエラーが発生する可能性もあります。修正を行うたびにコードを再検証することで、問題が完全に解決されたことが確認されます。

上記の基本的な例外を理解したところで、レイアウト設計が無効であるいくつかの理由を見てみましょう。

1. div タグが閉じられていません

これは、レイアウト設計が失敗する最も一般的な理由の 1 つです。このせいで、どれだけ多くの繊細なレイアウト設計が失敗しているかを知ると、いつも驚かされます。 Open div タグは、レイアウト設計で最もよくある間違いの 1 つであり、診断が最も難しいものの 1 つです。バリデーターは、間違った開始 div タグを指すことがあります。これは、干し草の山から針を見つけるようなものになる可能性があります。

2. 面倒な埋め込みタグ

1990 年代初頭、Microsoft と Netscape のブラウザーが標準以外の独自のフォントを認識できるようになりました。残念ながら、これは、「embed」などの特定の主要な HTML タグが広く使用されているにもかかわらず、W3C バリデーターがまだそれらのタグを認識していないことを意味します。本当に厳密な DOCTYPE (文書タイプ) 検証が必要な場合は、ネストを放棄するしかありません。
効果的なレイアウト設計と埋め込みメディアを同時に実現したい場合は、FlashSatay メソッドを試すことができます。

3. DIV CSS Web ページ レイアウトでの不適切な DOCTYPE 宣言

DOCTYPE を宣言していないこと、またはファイルの先頭で DOCTYPE を誤って宣言していることも、よくある間違いです。一般的な経験によれば、StrictDOCTYPE は誰もが追求する最高レベルの検証です。 Strictvalidation は、Web ページがすべてのブラウザで最適に表示されることを示します。

4. 末尾のスラッシュ

Web サイトを検証できない場合は、コードのどこかに末尾のスラッシュが欠落している可能性があります。特にイメージタグなどの要素では、末尾のスラッシュなどを見落としがちです。
これは厳密な DOCTYPE では効果がありません。この問題を解決するには、img タグの末尾に「/」を追加します。

5. DIV CSS Web ページ レイアウトのタグを揃える

DOCTYPE が Transitional に設定されている場合は、「align」タグを使用しますが、要求が厳しく、厳密な検証が必要な場合は、多くのエラーが表示されます。 Align もレイアウト設計には使用できないタグです。要素を変換するには、align の代わりに「float」または「text-align」を使用してみてください。

6. JavaScript

StrictDOCTYPE が宣言されている場合は、JavaScript で CDATA タグをオーバーライドする必要があります。 Web サイトは広告や追跡スクリプトに埋め込み JavaScript を使用する傾向があるため、検証プロセスのこの側面は多くのプログラマーを悩ませています。 JavaScript を使用する必要がある場合は、その前後に次のタグを追加できます:

7. DIV CSS Web ページ レイアウトの画像には「alt」属性が必要です

画像も潜在的な障害となることに気づいていないかもしれません。高度な検証。末尾のスラッシュに加えて、高度な検証では、alt="Scaryvampirepicture" など、画像を説明する alt タグも必要です。
検索エンジンは、Web ページ上の画像を識別するために alt タグにも依存しているため、どのような場合でも、常に alt タグを追加することをお勧めします。

8. 不明なエンティティ データ

エンティティ データは、検証に影響を与えるもう 1 つのよくある間違いです。 「&」などの記号を置き換えるために、適切なエンコード文字を使用することを検討できます。リスト全体には、XHTML セクション設計で使用できる適切にエンコードされた文字エンティティ データがリストされています。

9. DIV CSS Web ページ レイアウトのネストが不適切

ネストとは、要素が要素内に含まれることを意味し、ネストされた要素の順序を混同しやすくなります。たとえば、div タグの前に強いタグを開始しますが、最初に div タグを閉じます。これによってセクションのレイアウトは変更されない可能性がありますが、セクションのデザインは無効になります。

10. "title" タグの欠落

これは明らかな間違いのように思えますが、多くのプログラマー (私を含む) は、"head" セクションの title タグをよく見逃します。 「missing required sub-element of HEAD」（HEAD の必須サブ要素がありません）と表示されると、title タグを追加し忘れていることがわかります。

出典: http://developer.51cto.com/art/201009/223959.htm