Win Ie5x対策 幅を指定したら余白は0に
たまたま訪れたサイトで、自分のサイトが紹介されているというのも、なんか不思議な感じだ。
上記サイト「小粋空間」は、Movable Typeをカスタマイズする時に参考にして、ブックマークしていたものの、その後カスタマイズはほとんど行わなかったので、ウォッチしていなかった。
で、久しぶりに見たら、なんかうちのサイトにリンク貼ってくれてるし。びっくり。律儀な方ですなぁ。ありがとうございます。
で、実はこの記事後、私はサイトをプチリニューアルしたわけですが、以後、このハックは使ってません。（yujiroさん、すみません。。。）
どうしているかというと、「IE6のwidth解釈バグ対処法」と奇しくも同じ方法、つまり
widthとpadding/borderを一緒に指定しない
コレに尽きる。私はついでに「margin」も指定しない。私のCSSルールでは、Widthを指定したら、必ずマージン・パディングともに「0」に指定する。（ちなみに上記サイトでIE6といっているのは「IE6後方互換モード」のことで、これはものすごーーく省略して書くと「IE5x」のことだｗ）
たとえば私のサイトでいうと、左メニューの紺地のメニュー部分は
#links {
width: 260px;
float: left;
margin: 0px;
padding: 0px;
}
のように、widthを指定した要素のマージン・パディングは「0」にする。
マージンや余白を取りたいときは、その中のUL要素やP要素で指定し、そこではWidthは指定しない。これを徹底すれば、WinIe5xと6.0とのズレは解消されるはずだ。（「解消される」と断言できないのが、CSSのつらいところ。。。）
あとは、ボーダー。1pxくらいだと、そんなに気にならないので、その差は無視することもあるが、厳密なレイアウトをする時は、さらに外側にdivタグを入れ子にして、borderだけを指定するCSSを設定するか、もしくはborderは指定せず、背景画像で代用する。
