「背景画像を中央揃えにしたらIEで1pxずれる」という問題が発生し、その解決方法をインターネット調べていたら、どうやら「CSSハック」という事をすれば解決しそうだという事が分かりました。
どれどれ…。という事で、早速以下の記述を試みてみました。
/* IE7でpadding指定 */
*:first-child+html body {
padding-left: 1px;
}
/* IE6以下でpadding指定 */
*html body {
padding-left: 1px;
}
というCSSを追加記述するだけです。つまり、当ブログにおいては、ベースとなる中央揃えのCSSの記述、
body {
width: 960px;
background-image: url(../img/all/bg_body.jpg);
background-repeat: repeat-y;
background-position: center top;
margin-right: auto;
margin-left: auto;
background-color: #f1f7e0;
}
に加えるだけ、という事です。非常に簡単ですね。
と、思いきや！これって根本的に解決していないという事に気が付いてしまいました！
「固定幅＋中央寄せ」時の背景ズレ対策の根本的な問題
この固定幅で作成した<div>○○</div>の後ろに背景画像を中央寄せさせる方法なんですが、結局ブラウザの幅が偶数か奇数かによって、どの道ずれてしまうんですね…。
ブラウザの幅が偶数＋<div>固定幅が偶数＋背景画像が偶数＝ずれない
ブラウザの幅が奇数＋<div>固定幅が偶数＋背景画像が偶数＝ずれる
別な書き方をすれば、
ブラウザの幅が偶数幅の場合は奇数幅の画像がずれ、
ブラウザの幅が奇数幅の場合は偶数幅の画像がずれます。
この問題を解決しないことには上記のCSSハックを仕掛けても結局ずれてしまいます。
つまり、サイトを見てもらう時のブラウザ幅を、強制的に偶数ないし奇数に統一させる方法が必要だと思います。
そんな方法があるのでしょうか…？この問題、結構やっかいです。
まだ解決しなくて申し訳ないのですが、引き続き調査していこうと思います。
CSSハックについて色々考えた事
因みにCSSハックとは、各々のブラウザのバグを利用してCSSを記述し、適用する技法のことです。ネットで検索しまくった結果、実に多くのCSSハックが解説されている事が判明しましたが、殆どIE対策用でした。
さらに調べると、IE6はどうやら他のブラウザ（IE7、FireFox、safar、Opera等）と比べ、Web標準（W3Cという団体が勧告したWWW関連の規格）への準拠度が比較的低い為、ちゃんとCSSを記述しても問題が起きやすいそうです。
現段階で一番効率が良いのは、まずFirefoxで意図通りの表示を実現してから、その上でIEに対してCSSハックをかけるのが良いのだと思います。
しかし、ネット上では、「あくまでバグを利用してのものですので、あまり使いまくらない方がいいです。使わないですむなら、その方が優秀なコーディングですので、最終手段ぐらいに思っておきましょう。」
という意見もありました。なるほどかなり共感してしまいました。なんというか「ハック」という語感が個人的にかなり嫌だったでしょうか？共感というより、至極まっとうな意見でしょうね、これは。
因みにCSSハックに興味がある方は「CSSハック一覧 HTMLCSSタグ辞書」というサイトを見つけました。参考までにどうぞ。