前回、前々回と背景画像の中央寄せ＋ブラウザ間の解釈の違いに悩ませられ続けてる私ですが、色々紆余曲折した結果CSSの記述方法を変えることで回避する方法を閃きました。
CSSに精通している方にとっては「閃き」といった大げさなものでは無いのかもしれませんが、CSS初心者の私にとってはいいアイディアだったので同じ状況で困っている方にはかなり使えるかもしれません。
但し、この技が使えるのは背景画像が複雑なものでは無く、y軸に対してリピートさせるだけなどの単純な背景に対してのみ有効です。あしからず。
解決方法
今まで、サイトのレイアウトに関しては、以下のような考え方で構築していました。
ポイントのみピックアップしていますが、実際に記述したCSSはこちらです。（結構余計な記述も混じっているかと思いますがご勘弁を。）
body{
width: 960px;
background-image: url(../img/all/bg_body.jpg);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
background-color: #f1f7e0;
}
この記述の中にあるbg_body.jpgというのは実際にどういう画像かと言いますと、上の図の赤線で囲っている部分になります。
そして、今回解決策として思いついた記述方法は以下の通りです。
この時のCSSはこのように記述してあります。
body {
background-color: #f1f7e0;
width: 974px;
margin-right: auto;
margin-left: auto;
}
#wrap {
width: 974px;
background-image: url(../img/all/bg_body.jpg);
background-repeat: repeat-y;
margin-right: auto;
margin-left: auto;
}
注目は、新たに#wrapというidの<div>タグを横幅974pixで作成し、今まで<body>タグ背景画像だったbg_body.jpgを#wrapの背景画像に設定した所です。
つまり、背景画像にある、両端のグレイの線と外側に向かうグラデーションまで#wrap内包させた、という訳です。もうハックとか関係なしに、大元から変えちゃおう！という感じです。
最初はグレイの線の外側が背景、グレイの線から内側がサイトの中身、という考え方でした。
しかし発想を変え、グレイの線及び両外側に向かう影（グラデーション）までサイトの中身、という認識に切り替えたことで、見事各IE6においての1pixのズレを解決する事ができたのです。
色々弄ってみた印象ですと、もっと他に良い方法はありそうな印象をうけましたが、ここ数日こればっかり考えていたし、一応全てのブラウザでずれなかったのでこれで終わりにします。
わざわざ漫画喫茶に行って疲れて帰ってきました。アフィリエイトで成功するためには、何事も興味を持って物事に取り組め、ということですね…きっと。