1. HTML要素にスペルミスがないか、終了タグを忘れていないか確認します
divの入れ子関係はベテランでも間違えることが多いです。
2.CSSが正しいか確認してください
スペルミスがないか、最後の「}」を忘れていないかなどを確認してください。 CleanCSS を使用して、CSS のスペル ミスをチェックできます。 CleanCSS は CSS の軽量化を図るツールですが、スペルミスをチェックすることもできます。
3. エラーが発生した場所を特定します
エラーがレイアウト全体に影響を与える場合は、div ブロックを削除して表示が通常に戻るまで、div ブロックを 1 つずつ削除すると、エラーが発生した場所を特定できます。エラーが発生しました。
4. border属性を使用して、エラー要素のレイアウト特性を決定します
レイアウトにfloat属性を使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。
5. float要素の親要素にはclear属性を指定することはできません
MacIEでは、float要素の親要素にclear属性を使用すると、周囲のfloat要素のレイアウトが乱れてしまいます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。
6. Float 要素は width 属性を指定する必要があります
幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。
7. Float要素ではmarginやpaddingなどの属性を指定することはできません
IEではmarginやpaddingを指定してfloat要素を表示する際にバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に異常な値を指定することもできます。
8. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示できません。したがって、幅の合計が 99% 未満になるようにしてください。
9. デフォルトのスタイルがリセットされているかどうか
マージンやパディングなどの特定の属性は、ブラウザによって解釈が異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルをなしに設定することが最善です。
10. DTDの書き忘れはありませんか?
いくら調整してもブラウザごとに表示結果が異なる場合は、ページの先頭でDTDの書き忘れを確認できます。