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

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

IE6の1pxずれるセンタリングのバグ
こうなる。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のシェア落ちないかなぁ(´・ω・`)

  • コメント(0)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読