NetscapeのCSS解釈 - Lism.in * blog

どうせFirefoxと同じだとタカをくくっていたら、Netscape（Win・Mac共に）だけで発生する現象に遭遇しました。
ページ内のあるボックスに対して内容がハミ出した場合に、body要素の背景の幅計算が狂うという現象です。
以下のソースをそれぞれの環境で表示してみると、こうなります。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>css test</title>
  <style type="text/css">
   <!--
    body {
        margin:1em;
        background:url('body_bg.gif') repeat-y 50% 0;
        border:1px solid green;
        line-height:1.5;
    }
    .container {
        width:380px;
        margin:1em auto;
        border:1px solid red;
        word-wrap:break-word;
    }
    -->
  </style>
 </head>
 <body>
  <div class="container">
   <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
   <p>NetscapeでのCSSレイアウトについて、実験をしてみますよ。NetscapeでのCSSレイアウトについて、実験をしてみますよ。NetscapeでのCSSレイアウトについて、実験をしてみますよ。NetscapeでのCSSレイアウトについて、実験をしてみますよ。NetscapeでのCSSレイアウトについて、実験をしてみますよ。NetscapeでのCSSレイアウトについて、実験をしてみますよ。</p>
  </div>
 </body>
</html>

Windows IE6.0

Windows Firefox1.5

Windows Netscape7.1

Windows Opera8.5

Mac Firefox1.5

Mac Netscape7.1

Mac Safari2.0

Mac Opera8.5

Netscapeのみ、ハミ出したテキストに引きずられる形でbody要素の背景が右にズレます。
この例で言うと、「containerの左マージン＋ハミ出したテキストの幅」をbodyの幅として背景を配置してしまうようです。

他のブラウザでも、bodyに対してmarginとborderを指定しているのに、背景はボーダーの外まで出ているのは若干違和感を覚えますが、bodyの背景は通常のボックスのそれとは違う実装になっているようです。上記の例でも、bodyではなく、その下に一つdivを作って、一階層落としてやるとNetscapeでも他のブラウザと同様にレンダリングされました。bodyに対してはあまり複雑な指定をしない方が賢明かも知れません。