ブラウザには多くのバグがあるかもしれませんが、違うと感じてもバグがあるというわけではありません。問題には多くの理由が考えられるため、プロデューサーは問題をトラブルシューティングするための特定の方法を必要とします。
テストには、CSS 2.1 のサポートが優れている Opera 9.2、Firefox 2.0、Safari 3.0 などの高度なブラウザを選択することが賢明です。IE 6 には最も多くの問題があるため、IE 6 を唯一のテスト ブラウザとして使用しないでください。これは、制作者 (特に初心者) が CSS 2.1 の仕様を理解し、ブラウザのパフォーマンスが正しいかどうかを判断するのに非常に不利です。
高度なブラウザではテストが正しくても、IE に問題がある場合、基本的に問題は IE にあると判断できます。
高度なブラウザでの表示が正しくない場合は、まず次のような予備的な判断を行うことができます。
1. スペルが正しいかどうか、W3C 検証または Web ページ編集ソフトウェアの検証機能を使用して、(X)HTML ドキュメント内のタグが一致しているかどうか、ネスト順序が正しいかどうか、空のタグが正しいかどうかを確認できます。が閉じられているかどうか、CSS のスペルが正しいかどうか。間違ったネストや間違ったスペルは、非常に一般的なエラーです。
ヒント: 現在、ブラウザが CSS 属性をサポートしているかどうかなど、(X)HTML および CSS の検証機能を提供できる編集ソフトウェアが数多くあります。例: Dreamweaver 8 以降、TopStyle およびその他のソフトウェア。
ヒント: Firefox のアドオン ソフトウェア「Firebug」は、(X)HTML、CSS、JavaScript が正しいかどうかをチェックするだけでなく、ページ内の要素のフレームや位置を動的に表示することができます。 Web ページのデバッグに非常に適したプラグインです。
2. 適切な DTD はありますか?
この本の他の章では、DOCTYPE の重要性が何度も強調されていますが、DOCTYPE の違いはブラウザによる (X)HTML および CSS の解釈に直接影響します。
3. ブラウザは CSS 属性をサポートしていますか? 前の章で紹介したように、最新のブラウザは CSS 2.1 仕様のほとんどと一部の CSS 3 仕様をサポートしていますが、一部の CSS 属性はブラウザで広くサポートされていません。有効になりませんので、ブラウザが対応しているかご確認ください。
4. 問題を切り分けて、要素に目立つ境界線や背景色を追加するなど、問題のある領域を強調表示します。
境界線を追加することで問題が解決する場合、それはマージンの重なりの問題です。
背景を追加しても背景が表示されない場合は、特殊な機能が原因であるか、フローティング要素が閉じられていない可能性があります。
いくつかの属性、特に IE の hasLayout をトリガーする属性を変更して、それが IE の一般的なバグであるかどうかを判断してください。
5. 基本的なテストを設定します。 それでも問題が解決しない場合は、問題のファイルをコピーし、余分な (X)HTML を削除して、問題のある部分だけを残します。
(X)HTML 内のコメントの問題を削除し、問題が解消されるかどうかを確認します。
要素間のスペースを削除し、問題が解決するかどうかを確認します。
次に、問題がなくなるまでスタイル シートをブロック単位でコメント アウトし、コメントアウトしたばかりのスタイルが問題になります。
6. 現象を解決するのではなく、問題を解決する。パフォーマンスに合わせて Web ページを「美しく見せる」ために複雑なハックを使用するのではなく、問題の根本原因を見つけて解決することが最終的な目標です。問題を根本的に解決しないと、ブラウザをアップグレードしたときにさらに問題が発生する可能性があります。同時に、ハッキングにより、特に IE の hasLayout 属性のトリガーまたはトリガーの回避など、新たな問題が発生する可能性があります。
要素のmargin属性を解除し、親要素のpadding属性を設定するなどの考え方でも問題を回避できる場合があります。
Hack は本当に解決できない場合にのみ使用してください。