« ブログの情報組織化は検索エンジンに期待に一票 | メイン | ページの移動 »

Win Ie5x対策 幅を指定したら余白は0に

たまたま訪れたサイトで、自分のサイトが紹介されているというのも、なんか不思議な感じだ。

IE5.xでのボックス表示を修正する

上記サイト「小粋空間」は、Movable Typeをカスタマイズする時に参考にして、ブックマークしていたものの、その後カスタマイズはほとんど行わなかったので、ウォッチしていなかった。

で、久しぶりに見たら、なんかうちのサイトにリンク貼ってくれてるし。びっくり。律儀な方ですなぁ。ありがとうございます。

で、実はこの記事後、私はサイトをプチリニューアルしたわけですが、以後、このハックは使ってません。(yujiroさん、すみません。。。)

どうしているかというと、「IE6のwidth解釈バグ対処法」と奇しくも同じ方法、つまり

widthとpadding/borderを一緒に指定しない

コレに尽きる。私はついでに「margin」も指定しない。私のCSSルールでは、Widthを指定したら、必ずマージン・パディングともに「0」に指定する。(ちなみに上記サイトでIE6といっているのは「IE6後方互換モード」のことで、これはものすごーーく省略して書くと「IE5x」のことだw)

たとえば私のサイトでいうと、左メニューの紺地のメニュー部分は

#links {
width: 260px;
float: left;
margin: 0px;
padding: 0px;
}

のように、widthを指定した要素のマージン・パディングは「0」にする。

マージンや余白を取りたいときは、その中のUL要素やP要素で指定し、そこではWidthは指定しない。これを徹底すれば、WinIe5xと6.0とのズレは解消されるはずだ。(「解消される」と断言できないのが、CSSのつらいところ。。。)

あとは、ボーダー。1pxくらいだと、そんなに気にならないので、その差は無視することもあるが、厳密なレイアウトをする時は、さらに外側にdivタグを入れ子にして、borderだけを指定するCSSを設定するか、もしくはborderは指定せず、背景画像で代用する。