一般的な CSS エラーの概要_html/css_WEB-ITnose

初めて CSS を書いたとき、同じコードは他の場所では実行できるが、自分の Web ページでは実行できないことがわかり、マウスを投げたくなるほど腹が立ったことがあります。実際には、そうではないこともあります。コードに問題がありますが、CSS に関連する定義に問題があります。これらの間違いを避けるために、CSS のベテランであっても、次のよくある間違いに注意する必要があります。 CSS を記述するときに作成される可能性があります。

1. HTML 要素にスペルミスがないか、終了タグを忘れていないか確認します。
div の入れ子関係はベテランでもよく間違えます。 Dreamweaver の検証機能を使用して、エラーをチェックできます。

2. エラーが発生した場所を特定します
エラーがレイアウト全体に影響を与える場合は、特定の div ブロックを削除して表示が通常に戻るまで、div ブロックを 1 つずつ削除できます。エラーが発生した場所を特定できます。もちろん、テストする前に必ず元のコードをバックアップしてください。

3. border 属性を使用してエラー要素のレイアウト特性を決定します
レイアウトに float 属性を使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。

例:

border：1px red solid;

4. float 要素の親要素には、clear 属性を指定できません
float の親要素に clear 属性を使用する場合MacIE では、周囲の float 要素のレイアウトがわかりにくくなります。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。

5. CSS が正しいか確認します
スペルミスがないか、語尾の } を忘れていないかなどを確認します。 CleanCSS を使用して、CSS のスペル ミスをチェックできます。 CleanCSS は CSS の軽量化を図るツールですが、スペルミスをチェックすることもできます。

6. Float 要素は width 属性を指定する必要があります
幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。

7. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。幅の合計が 99% 未満であることを確認してください。

8. デフォルトのスタイルをリセットしましたか?
ブラウザーが異なれば、マージンやパディングなどの特定の属性の解釈も異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、リスト スタイルを none に設定するなどするのが最善です。

9. Float 要素はマージンやパディングなどの属性を慎重に指定する必要があります
IE が指定します表示時のマージン パディング付きの float 要素を使用するとバグがあります。したがって、float 要素に margin 属性とpadding 属性を指定する場合は注意してください。ハックを使用して IE に特別な値を指定することもできます。