アフィリエイト

※4月19日追記（先に読むことをおススメします。まずこの根本的な原因を理解しておかないと、勘違いしたまま対策を立ててしまう恐れがあります！）

このエントリーの下部に解決方法を記載していますが、先ほど根本的な問題が存在していることが発覚したので、最初に以下の文章を読んでおくことをおすすめします。

固定幅で作成した<div>○○</div>の後ろに背景画像を中央寄せさせる方法なんですが、結局ブラウザの幅が偶数か奇数かによって、どの道ずれてしまうんですね…。


ブラウザ幅偶数＋<div>固定幅が偶数＋背景画像が偶数＝ずれない
ブラウザ幅奇数＋<div>固定幅が偶数＋背景画像が偶数＝ずれる


別な書き方をすれば、


ブラウザの幅が偶数幅の場合は奇数幅の画像がずれ、
ブラウザの幅が奇数幅の場合は偶数幅の画像がずれます。


この問題を解決しないことには、下記で紹介している解決策「CSSハック」を仕掛けても結局ずれてしまいます。


つまり、サイトを見てもらう時のブラウザ幅を、強制的に偶数ないし奇数に統一させる方法が必要だと思います。

多分こちらの問題を解決してからじゃないと、以下の方法は正確な解決方法にはならないと思います。

私自身、今現在最も相応しい解決方法を模索している状態です…すみません。

取り合えずの解決方法として

CSS（スタイルシート）で背景画像等を中央寄せにした際に、IE7、IE6、firefox、safari等々で確認したら、1px（ピクセル）ずれてしまう…。

基本、原因はIEのバグです。そんな場合は以下の方法が有効です。

①最初に各ブラウザを画面いっぱいに広げるなどして、横幅を同じにする。 

②次に、firefoxで見た時に画像がズレていないかを確認します。これはfirefoxというブラウザがCSSの記述に対して最も忠実な解釈をするためです。

③最後にIEの各種バージョンでのズレをCSSハックという技を使って回避します。記述例は以下の通りです。CSSに追加でコピーペーストしましょう。

/* IE7でpadding指定 */
*:first-child+html body {
padding-left: 1px;
}


/* IE6以下でpadding指定 */
*html body {
padding-left: 1px;
}

これで、IE6とIE7で表示する時にだけ左に1pxずらす事になり、結果画像のずれが解消されます。

以上、ブラウザ間でのズレで悩んでいる方はお試し下さい。