CSSのよくある問題の解決策まとめ_体験交流

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ではmarginやpaddingを指定してfloat要素を表示するとバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に特別な値を指定することもできます。

8. float 要素の幅の合計は 100% 未満である必要があります。
float 要素の幅の合計がちょうど 100% である場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。

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

10. DTD を書き忘れていませんか?
異なるブラウザをどのように調整しても表示結果が異なる場合は、ページの先頭に次の DTD 行を書き忘れていないか確認できます:
-/ /W3C//DTD HTML 4.01 移行版//EN」「http://www.w3.org/TR/html4/loose.dtd」>