IE6で1pxずれて正確にセンタリングできない件

IE6に、margin: auto;でセンタリングしても1pxだけ横にずれるというそこそこメジャーなCSSのバグがある。

こうなる。IE6のコンテンツ部分が左に1pxずれている。

たかが1px。されど1px。この1pxのせいでデザインがパーになる事もあるし、クライアントと言い合いになることもナキニシモアラズ。

久々にはまっちゃったのでぐぐらずに解決してみた。（ぐぐれよ）

要は、IE6だけ1pxずらしてちゃんとした位置にしてあげればいいので、無理矢理ずらしちゃう。
具体的な回避方法は2つ。

1つ目。potisionでコンテンツ部分をずらす。

XHTML

1. <div id="wrapper">
2. <p>コンテンツ</p>
3. </div>

CSS

1. body {
2. width: 300px;
3. background: url(bg.jpg) center top repeat-y;
4. margin: 0 auto;
5. text-align: center;
6. }
7. div#wrapper {
8. width: 298px;
9. margin: 0 1px;
10. }
11. div#wrapper p {
12. height: 250px;
13. background: #C9DFBB;
14. }
15. *:first-child+html div#wrapper p {
16. position: relative;
17. left: 1px;
18. }
19. * html div#wrapper p {
20. position: relative;
21. left: 1px;
22. }

wrapper以下のコンテンツ全部に付けないといけないけれど、wrapper直下のコンテンツは大分すればheader、mainContents、footerの3つくらいだしそんなに手間でもないかなと。
増えてもまとめ書きしちゃえばいいし。

※bodyに背景を与えている今回のような場合は、#wrapper自体にpositionとleftを与えてもOKです。

2つ目。ぐぐってみました。bodyに対して左paddingを与えてみる。

CSS

1. * html body {
2. padding-left: 1px;
3. }
4. *:first-child+html body {
5. padding-left: 1px;
6. }

わぁ。これは便利。一発ですね。さすがグーグル先生。
どっち使う？って言ったら2つ目使いますね。わかりやすいし。
で、実際使ってみたら、一部うまくいったけどなぜか一部逆にずれた…。
原因不明で気持ち悪かったので結局1つ目を使いました。
うまくいった人は極短いコードで済むし便利なのでおすすめです。
とりあえずお試しアレ。

positionなら、原因不明でも部分的に調整っていうこともできるので、使い勝手はいいです。

その他にもぐぐってみたところ、背景画像自体で1pxずらしたものを用意するなんて方法があるみたいですが、ちょっと画像を用意するのは面倒だったので、potisionを使おうかなと思います。

Firefox3が出たばかりですが、本当にIEどうにかならないものですかね。
IEのシェア落ちないかなぁ（´・ω・｀）