忍者ブログ

デザプロブロ

デザインで出た問題の対応法の備忘録です。主にHTML、CSSかな？

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

paddingはブラウザ間でレイアウトが崩れる。

paddingは、gecko系を使用したブラウザとI.E.とレイアウトが異なってしまいます。
以下、paddingについて簡単なサンプルを作成してみました。
I.E.とI.E.以外のブラウザで違いが出ます。


※SAMPLE


I.E.で見た場合、以下のようになってるかと思います。
(I.E.9で確認)


FirefoxやChromeで見た場合は、以下のようになってます。



一目瞭然でpaddingを使用したレイアウトの長さに差が出ています。

・paddingとは
子要素を表示する余白を設定する。
※I.E.以外は指定した要素自身が膨らんで、子要素との余白を作る。
※I.E.の場合は、指定した要素の幅は変わらないが、子要素が縮まる。

・marginとは
指定した要素自身が親要素や隣接する要素との余白を作り縮こませる。


●対処法
・DOCTYPE宣言を変更する。
｢HTML4.01にほとんどのブラウザが標準準拠したl宣言にしちゃいましょう｣というやり方です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
もしくは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">
※SAMPLE

ここらへんはサイト、CSSデザインサンプルに素晴らしい調査結果があります。
レイアウトが崩れる原因

・レイアウトのテーブルやセルにpaddingを使用しない。
昔はこれをよく言われましたねw。paddingを使わないのが一番ゴタゴタしない。ただ、marginだけで対応しようとするとレイアウトをネストさせる構造に作らねばならず、いろいろ大変です。いまや古代の対応法だと思います。