【このページは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も互換モードに準じます。
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バグ＆回避法リスト：目次