Web ページ制作: 10 の一般的な DIV+CSS エラーの概要
著者：Eve Cole
更新時間：2009-06-12 17:53:00
1. HTML 要素にスペルミスがないか、終了タグを忘れていないかを確認します。
経験豊富なユーザーでも、div のネストを間違えることがよくあります。 Dreamweaver の検証機能を使用して、エラーをチェックできます。
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 属性を指定する必要があります。
また、要素を指定するときは単位として px ではなく em を使用するようにしてください。
7. Float要素ではmarginやpaddingなどの属性を指定できません。
IE には、マージンとパディングを指定して float 要素を表示するときにバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に異常な値を指定することもできます。
8. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。
9. デフォルトのスタイルをリセットしましたか?
マージン、パディングなどの一部の属性は、ブラウザによって解釈が異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルをなしに設定することが最善です。
10. DTD を書くのを忘れていませんか?
ブラウザごとに調整しても表示結果が異なる場合は、ページの先頭に次の DTD 行を書き忘れていないか確認してください。
＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
