Web制作

IEでブラウザサイズを変更すると背景との間にスキマができる

例えば、中央寄せのデザインを作ったとします。
こんなん。
中央寄せのデザイン

これをコーディングするときは、bodyにbackground: #fff url(img/bgbody.gif) repeat-y center top;を指定して、こういう背景にしますよね？
中央寄せのデザインの背景

んで、div#containerで全体を囲い、margin: 0 auto;で中央寄せしますよね？
div#containerで全体を囲い中央寄せ

しかしですね、そういう感じで作成すると、ブラウザを広げたり狭くしたりしたときに背景イメージとdivがずれて、間にスキマができてしまうことがあります。
隙間ができる

なんでこう1pxという単位は我々Web屋を苦しめてくれるんでしょうね。もしかして呪いの一種なのか。


この現象の原因としてはWin IEのバグのようです。もはやお約束ですね。

バグならばもうどうしようもないので、CSSハックを使って解消します。

/* IE6 */
body {
	_padding-left: 1px;
}
/* IE7 */
*:first-child + html body {
	padding-left: 1px;
}

これで、ブラウザサイズを変更してもぴったりくっついていてくれるようになりました。

More from my site

3 件のコメント

  • こんにちは。
    とても参考になりました。
    ありがとうございました。
    近いうちパソコンを購入し、サイトを作成したいと考えているので勉強になります。

    質問なのですがよろしければお願いします。
    勉強していたら、各ブラウザはIEも含め、HTMLでいうと文書型宣言のシステム識別子ありとなしで、標準モード·互換モードに切り替わると伺っていますが、
    システム識別子ありの標準モードの場合でも、IE向けにCSSハックという設定は必要になりますか？

    CSSバグというのは、標準モードであるのにCSS仕様通りの表示をしないということなのでしょうか？

    よろしくお願いします。

    返信する

  • お返事が遅くなってしまって申し訳ないです。コメントありがとうございます。
    ぜひカッコイイサイトを作ってください。

    結論から言ってしまいますと、標準モード・互換モードに関係なく、CSSバグがある場合はハックが必要になります。
    CSSバグというのは、ブラウザのCSS読み取り不備みたいなものです。標準モード・互換モードの区別なくCSS仕様を守ってくれません。特にIEはひどいですね。このせいでサイトを作成する人はみんなIEが嫌いになる傾向があります。
    まぁ、標準モード・互換モードによって解釈の仕方が違う、という差もあります。

    なので、サイトを標準モードで作成する場合であろうと、互換モードで作成する場合であろうと、バグにはハック、もしくは別の回りくどい手法（そのデザインを止めるとか、divをひとつ増やすとか）で対処する必要があります。

    こんなんで大丈夫ですか？
    わかりにくい長文で失礼しました。

    まぁ、とにかく、おかしいな？不思議だな？と思ったらグーグル先生に聞いてみたり、こんな感じで質問してみたりして、ぜひともカッコイイいけてるサイトを作ってください。

    返信する

    • コメントを残す

    メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

    CAPTCHA


    RECOMMENDこちらの記事も人気です。