DOCTYPE SWITCH 実例 (Standards mode)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

このページの DOCTYPE 宣言は上記の通りです。この場合、 MacIE5, Mozilla (Netscape6) の HTML/CSS 解釈動作は「仕様どおりに厳しく解釈するモード (Standards mode) 」に切り替わります。（ WinIE6 もそのようになるとの事）

text-align の効果 (Standards mode)

<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>

width, height の計算方法 (Standards mode)

この幅は 500px（比較用基準）

この幅は 600px（比較用基準）

<p style="width: 500px; border-width: 0; padding: 0">
「 width, height の示す幅・高さの範囲に内包子要素や文字等がぴっちり収められ、padding, border はその外周に追加する形で表示する」…これが CSS1/CSS2 の仕様です。 CSS3 でもこれが初期状態の解釈。
</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>

不正な数値の解釈 (Standards mode)

<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>

font-size の振る舞い (Standards mode)

<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>