IEでブラウザサイズを変更すると背景との間にスキマができる
例えば、中央寄せのデザインを作ったとします。
こんなん。
これをコーディングするときは、bodyにbackground: #fff url(img/bgbody.gif) repeat-y center top;を指定して、こういう背景にしますよね？
んで、div#containerで全体を囲い、margin: 0 auto;で中央寄せしますよね？
しかしですね、そういう感じで作成すると、ブラウザを広げたり狭くしたりしたときに背景イメージとdivがずれて、間にスキマができてしまうことがあります。
なんでこう1pxという単位は我々Web屋を苦しめてくれるんでしょうね。もしかして呪いの一種なのか。
教会に行かないと呪いは解けない、なんて言わずにどーにかこーにか呪いを解いてみましょう。
この現象の原因としては、Win IEのバグのようです。こォんのIEめェがぁ！
バグならばもうどうしようもないので、CSSハックを使って解消します。
/* IE6 */
body {
_padding-left: 1px;
}
/* IE7 */
*:first-child + html body {
padding-left: 1px;
}これで、ブラウザサイズを変更してもぴったりくっついていてくれるようになりました。やれやれ。
みなさま呪いは解けましたか？
こんにちは。
とても参考になりました。
ありがとうございました。
近いうちパソコンを購入し、サイトを作成したいと考えているので勉強になります。
質問なのですがよろしければお願いします。
勉強していたら、各ブラウザはIEも含め、HTMLでいうと文書型宣言のシステム識別子ありとなしで、標準モード·互換モードに切り替わると伺っていますが、
システム識別子ありの標準モードの場合でも、IE向けにCSSハックという設定は必要になりますか？
CSSバグというのは、標準モードであるのにCSS仕様通りの表示をしないということなのでしょうか？
よろしくお願いします。
お返事が遅くなってしまって申し訳ないです。コメントありがとうございます。
ぜひカッコイイサイトを作ってください。
結論から言ってしまいますと、標準モード・互換モードに関係なく、CSSバグがある場合はハックが必要になります。
CSSバグというのは、ブラウザのCSS読み取り不備みたいなものです。標準モード・互換モードの区別なくCSS仕様を守ってくれません。特にIEはひどいですね。このせいでサイトを作成する人はみんなIEが嫌いになる傾向があります。
まぁ、標準モード・互換モードによって解釈の仕方が違う、という差もあります。
なので、サイトを標準モードで作成する場合であろうと、互換モードで作成する場合であろうと、バグにはハック、もしくは別の回りくどい手法（そのデザインを止めるとか、divをひとつ増やすとか）で対処する必要があります。
こんなんで大丈夫ですか？
わかりにくい長文で失礼しました。
まぁ、とにかく、おかしいな？不思議だな？と思ったらグーグル先生に聞いてみたり、こんな感じで質問してみたりして、ぜひともカッコイイいけてるサイトを作ってください。