CSS Hacks まとめ (5) Box model hack
はじめに
まずは下記のページ辺りがソースでございます。
- http://css-discuss.incutio.com/?page=BoxModelHack
- http://www6.plala.or.jp/go_west/nextcss/tip/trans/boxmodelhack_jp.htm
- 基礎編2 ボックスモデルとDOCTYPEスイッチ
標準のbox modelって言うのは、width, heightはcontent areaのみの大きさを決めて、margin, padding, borderと言うのはcontent areaの大きさには影響を与えません。しかしIE6の互換モードやIE6以前では解釈が異なる為にこのHackは存在します。
どんな風に解釈が異なるかと言えば、padding, borderの幅がwidth, heightの中に含まれるようなイメージとなってしまって、指定したwidth, heightからpadding, borderの幅を引いた値が実際のcontent areaになっちゃうよって話です。
解説は割愛w
これ長いので上記のリンク先見て下さい。
基本的にはあの手この手でwidth, heightをIEの時だけ書き換えるって感じですね。
まとめ
標準モードを使えば解決。今さら互換モードなんて使わないでしょう。
ここらへんも合わせて読むと吉。
