DIV+CSSコードを適用する際に犯しやすいエラー
1761 ワード
CSS+DIVはウェブサイト標準(または「WEB標準」と呼ばれる)でよく使われる用語の一つであり、
通常、HTMLウェブデザイン言語におけるテーブルの位置付け方式との違いを説明するために、
XHTMLサイトの設計基準では、表の位置決め技術ではなく、css+div方式で様々な位置決めを実現しているからです.
DIV+CSS符号化を適用すると、いくつかのエラーが発生しやすい.この文書では、一般的なエラーをいくつか挙げます.
1.HTML要素にスペルミスがないか、終了マークを忘れていないか、ベテランでもdivのネスト関係を間違えることが多い.dreamweaverの検証機能でエラーの有無を確認できます.
2.CSSでスペルミスの有無、末尾を忘れていないかなどをチェックします.CleanCSSを利用してCSSのスペルミスをチェックすることができます.CleanCSSはもともとCSSのためにダイエットするツールですが、スペルミスもチェックできます.
3.エラーが発生した位置を特定エラーが全体のレイアウトに影響を及ぼした場合、divブロックを1つずつ削除し、あるdivブロックを削除した後に正常に戻ったことを表示するまで、エラーが発生した位置を特定することができます.4.borderプロパティを使用してエラー要素のレイアウトプロパティを決定floatプロパティレイアウトを使用すると、うっかりエラーが発生します.このとき、エレメントにborderプロパティを追加してエレメント境界を決定します.エラーの原因は水没石です.
5.float要素の親要素はclear属性MacIEの下でfloatの要素の親要素にclear属性を使用すると、周囲のfloat要素レイアウトが混乱します.これはMacIEの有名なバグで、知らないと回り道をします.6.float要素は必ずwidth属性を指定します.多くのブラウザでは、widthが指定されていないfloat要素が表示されるとバグが発生します.したがって、float要素の内容にかかわらず、widthプロパティを指定する必要があります.また、要素を指定するときはpxではなくemを使用して単位を指定します.7.float要素は、marginやpaddingなどの属性IEを指定することはできません.marginやpaddingを指定したfloat要素が表示されるとバグが発生します.したがって、float要素にmarginとpaddingプロパティを指定しないでください(float要素の内部にdivをネストしてmarginとpaddingを設定できます).hackメソッドを使用してIEに特別な値を指定することもできます.8.float要素の幅の和が100%未満の場合、float要素の幅の和がちょうど100%の場合、古いブラウザでは正常に表示されません.そのため、幅の和が99%未満であることを保証してください.9.デフォルトのスタイルをリセットしましたか?margin、paddingなどのプロパティによっては、ブラウザによって解釈が異なります.したがって,開発前にまず全体のmargin,paddingを0,リストスタイルをnoneなどに設定することが望ましい.10.DTDを書くのを忘れましたか?どのように異なるブラウザの表示結果を調整しても異なる場合は、ページの先頭に次の行DTDを書くのを忘れたかどうかを確認します.
通常、HTMLウェブデザイン言語におけるテーブルの位置付け方式との違いを説明するために、
XHTMLサイトの設計基準では、表の位置決め技術ではなく、css+div方式で様々な位置決めを実現しているからです.
DIV+CSS符号化を適用すると、いくつかのエラーが発生しやすい.この文書では、一般的なエラーをいくつか挙げます.
1.HTML要素にスペルミスがないか、終了マークを忘れていないか、ベテランでもdivのネスト関係を間違えることが多い.dreamweaverの検証機能でエラーの有無を確認できます.
2.CSSでスペルミスの有無、末尾を忘れていないかなどをチェックします.CleanCSSを利用してCSSのスペルミスをチェックすることができます.CleanCSSはもともとCSSのためにダイエットするツールですが、スペルミスもチェックできます.
3.エラーが発生した位置を特定エラーが全体のレイアウトに影響を及ぼした場合、divブロックを1つずつ削除し、あるdivブロックを削除した後に正常に戻ったことを表示するまで、エラーが発生した位置を特定することができます.4.borderプロパティを使用してエラー要素のレイアウトプロパティを決定floatプロパティレイアウトを使用すると、うっかりエラーが発生します.このとき、エレメントにborderプロパティを追加してエレメント境界を決定します.エラーの原因は水没石です.
5.float要素の親要素はclear属性MacIEの下でfloatの要素の親要素にclear属性を使用すると、周囲のfloat要素レイアウトが混乱します.これはMacIEの有名なバグで、知らないと回り道をします.6.float要素は必ずwidth属性を指定します.多くのブラウザでは、widthが指定されていないfloat要素が表示されるとバグが発生します.したがって、float要素の内容にかかわらず、widthプロパティを指定する必要があります.また、要素を指定するときはpxではなくemを使用して単位を指定します.7.float要素は、marginやpaddingなどの属性IEを指定することはできません.marginやpaddingを指定したfloat要素が表示されるとバグが発生します.したがって、float要素にmarginとpaddingプロパティを指定しないでください(float要素の内部にdivをネストしてmarginとpaddingを設定できます).hackメソッドを使用してIEに特別な値を指定することもできます.8.float要素の幅の和が100%未満の場合、float要素の幅の和がちょうど100%の場合、古いブラウザでは正常に表示されません.そのため、幅の和が99%未満であることを保証してください.9.デフォルトのスタイルをリセットしましたか?margin、paddingなどのプロパティによっては、ブラウザによって解釈が異なります.したがって,開発前にまず全体のmargin,paddingを0,リストスタイルをnoneなどに設定することが望ましい.10.DTDを書くのを忘れましたか?どのように異なるブラウザの表示結果を調整しても異なる場合は、ページの先頭に次の行DTDを書くのを忘れたかどうかを確認します.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">