スタイルシートをめぐる冒険

CSSトラブルシューティング / background関連

背景画像の位置指定では正確にセンタリングできない

スタイルシートでは背景画像の表示位置をキーワード（left, center, right, top, middle, bottom）または、ピクセル数（x, y座標）で指定できるが、centerと指定した場合、marginの設定によるセンタリングとは位置が一致しない。
[該当するブラウザ]
Windows／IE6.0

症状

画像Aを背景に

ボックスBをセンタリングすると

こうなるはずだが…

こうなってしまう

全体の幅が100ピクセルで左右に1ピクセルの罫線を持つ画像Aを背景に指定し、表示位置センターで縦方向にタイルさせ、さらに、幅98ピクセルのボックスBをmarginの設定でセンタリングして配置した（→サンプルページ1）。

本来であれば、ボックスBは左右がピッタリ背景画像Aの中に収まるはずだが、Windows版のIE6.0では、背景画像Aが右に1ピクセルずれるため、背景画像Aの左の罫線の一部がボックスBに隠れて消えてしまう。

【スタイルシート】

body {
    margin: 0;
    background: #cccccc url(bg.gif) center repeat-y;
}
#box {
    width: 98px;
    height: 50px;
    background-color: #999999;
    margin: 0 auto;
}

【HTML】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title></title>

</head>

<body>

<div id="box">&nbsp;</div>

</body>

</html>

原因

不明。しかし、Windows IE6.0でのみ発生するということは、このブラウザの、背景画像の表示位置に対する解釈がおかしいのではないか。しかし、相手が最もシェアの高いIEのしかも最新版では、ブラウザのせいという一言で片付けるわけにもいかない。

対策

結局、背景画像の表示位置指定によるセンタリングはあきらめて、高さ100%のボックスで全体を囲み、そのボックスに対して背景画像を指定するしかない（→サンプルページ2）。その際、標準モードではボックスの高さを100％にすることはできないので、互換モードにする必要がある。したがって、一番いいのはこの手のレイアウトは最初からしないことだろう。

赤字は変更部分
【スタイルシート】

body {
    margin: 0;
    background: #cccccc;
    text-align: center;
}
#background {
    width: 100px;
    height: 100%;
    background: url(bg.gif) repeat-y;
    margin: 0 auto;
}
#box {
    width: 98px;
    height: 50px;
    background-color: #999999;
    margin: 0 auto;
}

【HTML】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title></title>

</head>

<body>

<div id="background">

<div id="box">&nbsp;</div>

</div>

</body>

</html>

(last modified: 09/12/2008)

TrackBack

このエントリーのトラックバックURL:
http://norisfactory.com/mt/mt-tb.cgi/10