ADP: IE6のwidth解釈バグ対処法で、ピクセル単位で合わせるところではborderを使わない、と書いたのに、その説明をちゃんとしていなかった。
今回は2つのケースで、Firefox、IE7（標準準拠モード）、IE6（後方互換モード）の見た目を比較する。特に、FirefoxとIE7で同じ見た目にできないことをもって「ピクセル単位で合わせるところではborderを使わない」と主張するのが今回のお題だ。
htmlは、divの中にp要素がある、よくあるタイプのものを用いる。
ひとつめのケースは、横幅や高さの指定で背景の範囲が変わる問題[未修正](MYCOMジャーナル、2006年7月13日)で紹介されているものである。
#case1 {
width: 120px;
padding: 40px;
border: dashed 20px black;
background-image: url(images/20060828-2.gif);
}
#case1 p {
}ボーダーの実験ケース1 (280 by 640 pixels, 20.3KB)
div要素にwidthとborder（dashed）とpaddingと背景画像を指定し、その中のp要素に中身を書いている。Firefox、IE7ともに標準準拠モードなので、ボックスの横幅は同じになる。が、背景画像がボーダー部分にも表示されるかされないか、に違いが出る。これはIE7において、「ボックスに横幅を指定するとボーダー部分に背景画像が適用されなくなる」という現象が発生するからだ。結局、borderにdashedなどを指定すると、同じ見た目にできない。なお、背景画像は、Firefox、IE7ともに、パディング辺の左上隅が背景画像の左上隅とぴったりあうように敷き詰められる。
ここでは、borderにsolidなど、背景画像がボーダー部分に表示されない指定をすれば、FirefoxとIE7で同じ表示になる。
しかし、このケースはIE6の後方互換モードではうまくいかない。borderやpaddingをwidthに含めてしまうからだ。よって、XML宣言つきのXHTMLで書く場合は、同じ見た目にできない。
ふたつめのケースは、外側のボックス（div要素）でwidthのみを指定し、内側のボックスでは横幅を指定せず、borderとpaddingと背景画像を指定するやり方だ。
#case2 {
width: 240px;
}
#case2 p {
padding: 40px;
border: dashed 20px black;
background-image: url(images/20060828-2.gif);
}ボーダーの実験ケース2 (280 by 600 pixels, 19.1KB)
ADP: IE6のwidth解釈バグ対処法で説明したとおり、標準準拠モードでも、後方互換モードでも、ボックスの横幅が同じになるのがこのやり方のメリットだ。しかも、FirefoxでもIE7でもボーダー部分にまで背景画像が適用される。内側のボックスではwidthを指定していないため、「ボックスに横幅を指定するとボーダー部分に背景画像が適用されなくなる」という現象が起きないためである。
このやり方でよさそうに思えるが、表示結果をよくよく見ればわかるように、今度は背景画像の開始地点が違う、という問題が発生する。Firefoxは、パディング辺の左上隅が背景画像の左上隅とぴったりあうように敷き詰められるのに対して、IE7やIE6ではボーダー辺の左上隅が背景画像の左上隅とぴったりあうように敷き詰められる。よって、ここでも同じ見た目にはならない。
このケースでは、背景画像を使わなかったり、問題の起きない背景画像を使えば同じ見た目にできる。しかし、うっかりすると落とし穴にはまる。borderが20ピクセルのように大きければすぐ気づくが、数ピクセルの場合、被害に気づかず後で発覚するようなことにもなりかねない。
以上のように、borderと背景画像を一緒に使おうとすると、同じ見た目には基本的にできなくなる。説明で書いたような回避方法を使えば回避できるが、理解するのも覚えるのも面倒だと思う。よって、結論は以下のとおりだ。今回の場合わけをちゃんと理解するより、「ピクセル単位で合わせるところではborderを使わない」とだけ覚えて、枠線をつけたいときには背景画像で表現したほうがはるかに安全だ。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/570
