DIV CSS Web ページでよくある間違いの概要_エクスペリエンス交換

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 行を書き忘れていないか確認できます:
行版//EN" "http://www.w3.org/TR/html4/loose.dtd">