【このページはXHTMLで書かれています。】

実験ページ:スタイルシート各属性の継承、ボックスの大きさ、文字サイズ


■指定無しのテキスト
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789


■テーブル内部、div要素、span要素、h2要素への継承
フォントは「font-family:Courier;」と指定しています。 Courierは等幅系フォントです。
日本語のページなのでNS4ではfont-familyの指定は反映されません。
■親要素の設定:
color:blue;
font-size:30px; font-family:Courier; font-weight:bold; font-style:italic;
text-align:center;
line-height:150%; letter-spacing:10px;
border:solid green 5px;
padding:10px; margin:20px;
background:#CCCCCC;
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789
■テーブルへの継承:
IE6.0,Opera7.0,NS6+は標準モードだとテーブル内部にも継承します。
IE6.0では互換モード(デフォルト)ではfont-familyのみ継承しています。
IE4-5.5,NS4はIE6.0と同じくfont-familyのみ継承しています。
NS6.1,NS7.0,Opera7.0(互換モード),Opera6.01ではcolor,font-style,letter-spacing,line-heightも幾つか継承しています。
いずれの場合もfont-sizeは継承していません。
IE4+,NS4ではtext-align:centerがブロック(テーブル)にも反映されています。

I am caption element's content.
abcdefg ABCDEFG 123456789
I am TH element's content.
abcdefg ABCDEFG 123456789
I am TH element's content.
abcdefg ABCDEFG 123456789
I am TD element's content.
abcdefg ABCDEFG 123456789
I am TD element's content.
abcdefg ABCDEFG 123456789
font-size:120%
abcdefg ABCDEFG 123456789
font-size:90%
abcdefg ABCDEFG 123456789
font-size:1.2em
abcdefg ABCDEFG 123456789
font-size:0.9em
abcdefg ABCDEFG 123456789
font-size:small
abcdefg ABCDEFG 123456789
font-size:x-small
abcdefg ABCDEFG 123456789

■DIV要素への継承:
パーセントやem,exによるフォントサイズ指定では 算出時の基底値に継承された値を使っています(IE3.0以外)。
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789
font-size:120%
font-size:90%
font-size:1.2em
font-size:0.9em
font-size:small
font-size:x-small

■SPAN要素への継承:
パーセントやem,exによるフォントサイズ指定では 算出時の基底値に継承された値を使っています(IE3.0以外)。
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789
font-size:120%
font-size:90%
font-size:1.2em
font-size:0.9em
font-size:small
font-size:x-small

■H2要素への継承:

abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789

font-size:120%

font-size:90%

font-size:1.2em

font-size:0.9em

font-size:small

font-size:x-small

■ボックスの大きさ
IE6.0,Opera7.0(標準モード)やNS6+(標準・互換モード),Opera6.01ではwidthに border,padding値も含まれます。
IE6.0,Opera7.0(互換モード,デフォルト)では含まれません。
IE4-5.5,NS4も互換モードに準じます。
ruler
width:200px; border:green 10px solid; padding:20px;

■キーワードによる文字サイズ指定
IE6.0,Opera7.0(標準モード)とNS6+(標準・互換モード)では デフォルトの文字サイズ=mediumとなります。
IE6.0,Opera7.0(互換モード,デフォルト)ではsmallと一致します。
IE4-5.5,NS4,Opera6.01も互換モードに準じます。
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789 (指定無し)
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789 (font-size:medium)
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789 (font-size:small)
abcdefghijklmnopqrst uvwxyz_-/ ABCDEFGHIJKLMNOPQRST UVWXYZ123456789 (font-size:x-small)

XHTMLで書いたページ
モードの指定無し(普通のHTML)のページ
標準モードを指定したページ
互換モードを指定したページ
XHTMLのページ(XML宣言有)はNS6+では標準モードですが IE6.0,Opera7.0では互換モードになります。 IE4-5.5,NS4,Opera6.01も互換モードに準じます。

このページでは「きぃなび」を使ってないので 前の項目に戻るには BackSpaceキーか ブラウザの「戻る」ボタンを使って下さい。

HTML,CSSバグ&回避法リスト:CSSその他の話題
HTML,CSSバグ&回避法リスト:目次