position:absoluteとwidth:100%の組み合わせでの注意事項

[programming]

なんか、同じ事を調べたような気がするので、メモ。


position:absoluteでwidth:100%を指定する場合、ブラウザによってmarginとborderが含まれるかどうかが違ってくるので注意が必要です。(100%に限定せず、%指定時の問題)

例えば、下記のようなHTMLの場合、

<html>
  <head>
  </head>
  <body>
    <div style="position: absolute; height: 100%; width: 100%; background-color: #666666; top:0; left: 0;">
    </div>
  </body>
</html>

FireFox(1.5で確認)、Opera(9.0で確認)の場合、ウインドウ全体がdivで覆われますが、IE(6で確認)だと右端が白いままになります。
これは、IEだとwidthで%指定をした場合、margin、borderを含まないサイズになるのでその分が白く表示されることになります。(IEのbodyのデフォルトmarginは左右10px(だったと思う))


bodyのmargin、borderをなくすことにより、IEでも全体が覆われるようになるので、そうできるならそうした方が手っ取り早いかも。
(全セクレタのmarginを0で初期化しているような人にはあまり関係の無い話でした)


Lightbox JSが実際上記のようなスタイルでウインドウ全体にレイヤかぶせようとしていて、導入したページのbodyに対するmarginがある場合、IEで右端が白いままになってしまいます。