<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
このページの DOCTYPE 宣言は上記の通りです。この場合、 MacIE5, Mozilla (Netscape6) の HTML/CSS 解釈動作は「古いブラウザの解釈を再現するモード (Quirks mode)」に切り替わります。( WinIE6 もそのようになるとの事)
<div style="text-align: left">
<p style="width: 75%">
んがんぐ。</p>
</div>
<div style="text-align: center">
<p style="width: 75%">
んがんぐ。</p>
</div>
<div style="text-align: right">
<p style="width: 75%">
んがんぐ。</p>
</div>
<p style="width: 500px; border-width: 0; padding: 0">
「 width, height の示す幅・高さの範囲に内包子要素や文字等がぴっちり収められ、padding, border はその外周に追加する形で表示する」…これが CSS1/CSS2 の仕様です。 CSS3 でもこれが初期状態の解釈。(box-sizing: content-box
)
</p>
<p style="width: 500px; border-width: 0 20px; padding: 0 30px;">
この段落は、左 border 20px, 左 padding 30px, width 500px, 右 padding 30px, 右 border 20px 。合計 600px。この段落がちゃんと 600px で表示されてるなら、そのブラウザは CSS の仕様通りに解釈をしている 。
</p>
<pre style="border-width: 1px; border-style: solid">
んがんぐ。</pre>
<pre style="border-width: 1; border-style: solid">
んがんぐ。</pre>
<pre style="border: 1px solid">
んがんぐ。</pre>
<pre style="border: 1 solid">
んがんぐ。</pre>
<p>
( font-size
無指定)
娘娘飯店。Nyan-Nyan-Hanten.
</p>
<p style="font-size: small">
娘娘飯店。Nyan-Nyan-Hanten.
</p>
<p style="font-size: medium">
娘娘飯店。Nyan-Nyan-Hanten.
</p>
<p style="font-size: large">
娘娘飯店。Nyan-Nyan-Hanten.
</p>