標準モードの場合、IE6.0,Opera7.0,NS6+の各ブラウザでは テーブルの内部にも多くの属性を継承しますが 互換モードやモードの区別のないブラウザ(IE4-5.5,NS4)では異なります。

互換モード(デフォルト)の場合、IE6.0では font-familyのみ継承するようです。 モードの区別のないIE4-5.5,NS4も同様です。

一方 NS6.1,NS7.0,Opera7.0では color,font-style,font-weight,letter-spacing,line-height のうち幾つかを継承しています。

いずれの場合も互換モード(デフォルト)では テーブル内部にfont-sizeは継承していません(IE3.0以外)。

(FixME)

「font-size:20px」の文章で 「line-height」の値として「200%」などとパーセントが指定された場合は 算出後の数値「40px」が継承されます。 「2.0」などと数値で与えられた場合はその値自体が継承され 子要素で「font-size:10px」だったらline-heightは「20px」となります。 一方値が「normal」の場合は親要素からの継承をしません。

ブラウザ毎に動作を見てみると

		NS4：normalを指定しても親要素のline-heightを継承してしまう。
		NS4：数値で指定した場合に計算後の高さを継承してしまう。
		NS6.1：パーセントで指定した場合に割合を継承してしまう。NS6.0,7.0は大丈夫。
		Opera6.01,6.03：normalを指定しても継承してしまう。Opera7.0は大丈夫。

などと動作にばらつきがあります。

実験ページ：line-height属性の継承

文字の大きさはfont-sizeで指定できますが IEで文字のサイズを可変にするために [px][pt]のような絶対値ではなく 相対値(キーワード,[%][em][ex])による指定が推奨されています。

[%]や[em],[ex]を採用した場合、算出時の基準値は 親要素のfont-sizeになるので注意が必要です。

例えば小さ目の文章を記述するのに 「<div style="font-size:70%;">...</div>」 とする場合、親要素でfont-sizeが90%だったら「90%×70%＝63%」 70%だったら「70%×70%＝49%」となります。 同じ指定をしても、このように親要素によって文字サイズが変わってしまいます。

font-sizeに[%]や[em],[ex]を使う場合は 残念ですがタグの入れ子をやりにくいです。 文字サイズをこれらの単位で指定した場合は文字の大きさを変える度に タグを入れ子にせず 毎回タグを閉じた方がいいかも知れません。

ブロック要素のwidth値の解釈は IE4,5,6,NS4などではブロック全体の幅、 NS6,7,Opera6ではブロックのborder値とpadding値を除いた幅になるようです。

Netscape6,7で横幅超過

そのため サイズをピッタリ揃えたレイアウトをしたい時には注意が必要です。 NS6,NS7については「-moz-box-sizing : border-box;」 (「box-sizing : border-box;」の独自拡張)が使えます。

Netscape6,7ではOK

しかしながらOpera6、Opera7.0Beta1では何れも効かないようです。 そこでwidth値のみを指定したdivタグで全体を囲ってみます。

Netscape6,7ではOK

上の例はNS6,7ではOKですが NS4で表示させると 3.2 ブロックのデフォルトの幅が小さいの為、幅が小さくなります。 そこで width:100%を指定すると 今度はNS6,7で大きめに表示され(下記) 対策になりません (次項参考)。

Netscape6,7で横幅超過

そこで width:100%ではなくmargin:0px;を使ってみるとうまく行くようです。

Netscape4,6,7でもOK

枠線やpaddingがあるブロックで 外側の幅を正確に指定したい場合の記述。

スタイルシートの仕様では ブロックのwidth,height値は 実際のブロックサイズからborder,padding値を差し引いたものになっています。 つまり width,heightで指定するのはブロックの中身の大きさです。 そのためCSSの仕様上はNetscape6+、Opera6の動作が正しいものになります。

ついでながらtableタグではどうなってるか見てみましょう。

table width=300

borderの外側で測られます。次はtdセルです。

td width=100 td width=100

tdではpaddingを除いた内側の大きさになっています。 混乱しやすいので注意しましょう。

子要素でwidth:100%を指定した場合には 直感的には その大きさが親要素の幅にピッタリ合うことが期待されます。 しかしborderやpadding, marginの指定がある場合には その分だけ幅が大きくなり 結果的に親要素の幅を超えてしまいます(NS6,NS7)。 またOpera6の場合にはmarginの分だけ大きくなります。

この現象は前項のブロックサイズの解釈がMozilla系、Operaで異なる ことに関係しています。

前の項目の例で 親要素にdivタグを使った場合の例を扱いました。 ここではテーブルを使った場合の例を示します。

Netscape6,7で横幅超過

上の例をNS6,NS7で見ると width:100%を指定したブロックが親要素の幅を超えていることが分かります。

先の「-moz-box-sizing:border-box;」を使えば NS6,7で padding,border指定分がはみ出る問題は解決できます。 しかし margin値だけはみ出てしまいます。

Netscape6,7で横幅超過

横幅を指定したtdセル内にテーブルがある場合を考えます。

入れ子にされたテーブルは親要素のサイズ内に収まるのが普通ですが IE4,5,6ではmarginが指定されていると その分だけ はみ出してしまいます (横幅の小さなテーブルは除く)。

abc def ghi jkl mno abc def ghi jkl mno

marginの指定をtableタグではなく外側に囲ったdivタグで行っても発生します。

abc def ghi jkl mno abc def ghi jkl mno

しかしながら 全体をwidth=100%としたdivタグで囲うと IE5.0,IE5.5,IE6.0ではうまく行くようです。

abc def ghi jkl mno abc def ghi jkl mno

上の例をIE4.0で表示させると右側にはみ出ているのが分かります。 またNS4で見ると不適切な位置に 大きなマージンが出来ているのが分かります。

<td width=...>などと幅を指定したテーブルはレイアウトによく使われます。 そのレイアウト用テーブルの内部で

<table style="margin:...">としたり

<div style="margin(or padding):...">...</div>の内部にテーブルが含まれる (頻出？)

そういった場合は 影響が親要素に及び レイアウトがずれる可能性があるので注意が必要です。

解決法として親要素(<td width=...>)のwidth値が分かる場合は tableタグにmargin値を引いたwidth値を与えるか 全体を幅を指定したdivタグで囲ってもいいでしょう。

しかし親要素のwidth値を控えておくのは面倒なので 以下の方法を考えてみました。

まず 一番外側をwidth:100%のブロックで囲みます。 ここでpaddingやmarginを指定すると 4.3 width:100%を指定すると親要素の幅を超える(NS6,NS7,OP6)に書いたようにNS6+,Opera6などで はみ出てしまうので それ以外の指定はしません。そしてもう一つブロックを用意し これにmarginを指定します。

abc def ghi jkl mno abc def ghi jkl mno

余白を指定するのに 親タグが<td width=...>であり 且つ中身にwidth指定の無いテーブルが含まれる場合でも 中身がはみ出さないように配慮した方法。

CSSによるフロート指定は厳密に要素の位置を決めるわけではないので HTMLの場合と同様 予想外の表示がなされることがあります。 例えば「style="float:right;"」を指定した場合

		ウィンドウ幅を大きくしても常に横スクロールバーが表示される(IE4)
		float:rightを指定した要素が親要素の枠の外に表示される(NS4)
		背景(色,画像)が指定されている場合に一部の文字列が消えることがある(IE6) 03/05/18更新： ・line-heightが指定されていると消えない模様。 ・下記の各例ではline-heightの継承を避けるため tableタグを使用。

これらは親要素でwidthを指定(auto以外)すれば解決するようです。

比較的新しいブラウザでも タグやオプション、中身の組合せによっては 一部が表示されなかったり、場所がずれたりするので 注意が必要です。

これはfloat:right指定されたブロックの前にある文字列です。 IE6では表示されません。 <div style="float:right; border:solid thin; width:200px;">指定 これは回り込んでいる文字列です。 IE6では表示されません。 直前に<div style="clear:both;">を置き回りこみ解除。

上のIE6のバグは テーブルや画像に対し 回り込み指定をHTMLオプション「align="right"」で行っても発生するようです。

これはalign=rightとした画像の前にある文字列です。 IE6では表示されません。 これは回り込んでいる文字列です。 IE6では表示されません。 直前に<br clear="all">を置き回りこみ解除。

先に書いたように これらはボックスにwidthを指定すると解決できます。

これはfloat:right指定されたブロックの前にある文字列です。 IE6では表示されません。 <div style="float:right; border:solid thin; width:200px;">指定 これは回り込んでいる文字列です。 IE6では表示されません。 直前に<div style="clear:both;">を置き回りこみ解除。

IE4.0ではスタイルシートのfont-family属性に 「cursive」「fantasy」を指定すると日本語が文字化けします。 またIE3.0では 「Times New Roman」「Arial」「Courier」「Courier New」を指定すると 文字化けします。 「Times,cursive」「Arial,sans-serif」のように カンマで区切って複数のフォントを指定する場合でも、 これら以外でインストールされている有効なフォントが先に置かれないと 文字化けしてしまうようです。

テキスト指定例リスト：フォントファミリー

		IE4.0ではクラス名やID名にアンダースコア「 _ 」、ハイフン「 - 」を使えない。
		NS6.0ではアンダースコア「 _ 」を使えない。 IE3,NS4でも同様の問題が発生します。NS6.1,7.0では大丈夫です。 実験ページ：スタイル指定にアンダースコア等を使用

		IE4-6では margin,padding,text-indentを％で指定した場合、 親でwidth値が指定されていないと その上の親のwidth値を元に算出することがある。 widthに関しては大丈夫なようです。なお、border-widthでは％は使えません。 padding,text-indentについてはブロック自体のwidthが指定されていると 大丈夫です。 但しIE4ではブロック自体にwidthを明示しても text-indentの指定は無視されたり paddingの算出で親要素のwidthを参照するなど扱いがおかしいようです。 margin,padding,text-indentではパーセントの利用は注意したほうがいいでしょう。
		IE4-6,NS4ではブロックに「margin-left:auto; margin-right:auto;」を指定しても センタリングされない。 逆にIE4-6,NS4では親要素で「text-align:center」とすれば テキストだけでなくブロックもセンタリングされます。 センタリングのための互換性のある方法としては両者を組合わせるか 親要素で「align="center"」を指定してもいいでしょう。 但しNS4ではdivボックスに「text-align:center」「align="center"」を 指定するとボックス自体もセンタリングされるのでNS4にも対応したい場合は centerタグを使った方がいいかも知れません。 なお、IE6等多くのブラウザでは何れの方法でも子要素の中身にまで センタリングが継承されていくので注意が必要です。
		IE4では背景画像で「background-position」を指定すると画像が開始位置から 右下方向にしか敷かれない。 例えば画像をブロックの右側に敷きたい場合は 「background:url(...) repeat-y right;」だけでなく「top」も追加する。 NS4では「background-position」はサポート外。
		NS6.0,NS6.1,Opera7.0ではリンクのアンカーがスクロール範囲外にあると 該当位置までスクロールせず(NS7.0はOK)。
		Opera6ではoverflow:autoがvisible扱いになり、 はみ出た部分が周りの要素と重なる。 overflow:scrollはhidden扱いになり、はみ出た部分が表示されない。
		通常「position:absolute」を指定したレイヤー(div要素)の巾は内容物に 合わせられるがIE4では右一杯に広がってしまう (背景属性を設定すると瞭然)。 divではなくtableを使うのもひとつです。
		NS6.0,NS6.1ではtable要素に指定した背景画像が各セル毎に個別に貼られてしまう。 背景指定はdivなど親要素を用意して その中で行います。

		IE4-6,Opera6-7では「font-family:欧文フォント、和文フォント」として 複数フォントを指定しても、日本語に指定した和文フォントが採用されない。 フォントファミリー指定例
		IE5.5で「font-family」に「sans-serif」が採用されると 内臓フォントによっては文字化けする。 MS情報：sans-serifを指定したHTMLファイルを表示すると文字化け 「sans-serif」指定の前に「ＭＳ Ｐゴシック」などを必ず書いておく。
		IE4-6では「line-height」を指定したテキストで画像やinput,iframeがある行の line-height値が小さくなっている(＝デフォルトのline-height値?!)。 その結果、画像のある行が隣接すると 行間が取られずくっついてしまいます。 画像をインラインで置く場合は遠めに配置したほうがいいかも知れません。 或いはspanタグを用意し画像を背景に設定してもいいでしょう。 margin指定時にも似たような現象が発生する模様。
		IE5-6では「letter-spacing」を適用したテキスト内での連続改行を一回分無視する。 改行タグに「letter-spacing:0px」を指定すると解決します。 <br>を<br>&nbsp;&nbsp;書くようにして 段落ごとに字下げするようにしてもいいでしょう。 また 空行を作りたい場合は改行タグを使わず pタグを使うか heightを指定したtableタグを利用してもいいかも知れません。
		IE4では「text-indent」をwidthを指定したdivタグやテーブルのtdタグで指定しても 動作しません。
		IE5ではdivボックス自体も指定量だけインデントします。
		IE5.5-6ではタグの組合せによってはパーセントで指定した場合に ボックスのサイズが横に大きく伸びてしまうようです。 text-indent実行例 字下げは全角スペースや&nbsp;、透明GIF画像などを使った方がいいでしょう。

「position:relative」とした要素内の 「<a name=...>...</a>」の位置がずれている(IE4-6)。 該当nameへリンククリックや「location=...」を実行しても 表示されている場所とは異なる位置に移動。 またスクリプトで逆算した位置も別の位置にずれていることも。

先の項目の要点をまとめてみました。 以下のような事柄に注意するといいでしょう。

		クラス名やID名にアンダースコア「 _ 」、ハイフン「 - 」を使わない。
		要素が入れ子になる時はどの属性がどの要素にどう継承するのか注意する。 特にtableではブラウザ毎にばらつきがある。
		ボックスのwidthの解釈がIEとNSで異なるので注意する。
		％を使う時はIEで親の親のサイズを参照する可能性があるので注意。
		margin,text-indentを指定する時にはIEで注意必要。
		フロート指定は問題が出やすい。
		日本語テキストに対するフォント指定は 欧文フォントや一般フォントファミリを使わない方が無難。

あまり使われなくなったIE3ですが CSSをサポートしているので追加します。

以下は Windows95のIE3.0で試した結果をまとめたものです。

		styleタグが複数ある場合 最後の指定のみ利用される。
		linkタグが複数ある場合 最後の指定のみが利用される。 その後再読込みすると別の指定が有効になったりする (不安定)。
		linkタグを使った外部スタイルシートの指定があるとstyleタグによる指定を無視。
		@importはサポート外。 →ブラウザ分岐に利用できる。NS4も同様。
		「AttrName:'Value'...」という記述があるとそれ以降のスタイル指定を無視。 「:」と「'」の間に空白を入れても解決しない。フォント指定時に注意。
		「AttrName:Value1,Value2,...」という記述があると同じ範囲での後続の指定を無視。 列挙された値を「""」で囲むと通るがCSS非標準?!。
		クラス名やID名にアンダースコア「 _ 」や ハイフン「 - 」を使うと指定を無視。 それらが無いものとして名前を扱うようです。例：「a_b」＝「ab」
		IDセレクタにタグ名をつけて例えば「div#id」等とすると無視される。
		同じセレクタに対し複数の定義があると始めのものを採用。 例えば「div.abc」を定義後、再度「div.abc」を定義しても上書きできない。

		ブロックの枠が表示されない (borderはサポート外)。
		ブロックの幅が小さめ (NS4と同じく内容物に合わせている)。
		padding、width、height指定は動作せず。
		「margin:10px 20px ...;」とpxで複数指定すると「margin:10px;」として解釈する。 ピクセルで複数の値を指定するときはpxをつけないと動作する模様(CSS非標準?!)。
		margin,margin-bottomを指定しても下側に空白が出来ない。 →上記各項目については代替手段としてtableタグを利用
		table,div,pなどブロック系要素は 親要素でmarginが設定されているとmargin-topを継承してしまい 上側に空白ができる。
		tableの各セルはtable要素やその親要素にmargin-leftが設定されていると それを継承してしまい左側に空白ができる。 →tableを入れ子にした場合は親tableのmargin-left,topを継承。 IE3では他のブラウザと異なり tableでも殆どの属性を継承してしまうので注意が必要です。 CSSでmargin指定をする時はIE3に適用されないよう工夫してもいいでしょう。 参考：5. ブラウザ別にスタイルシートを指定
		background-color,background-imageなど個別指定は動作しない。 背景はbackgroundを使いまとめて指定する (background-color,image,position,repeat,attachment) 「body {background:white url(haikei.jpg) right top repeat-y fixed; }」 とすれば動作。
		背景色,背景画像はdiv,span,p要素など(table,td,body除く)に適用した場合 文字のある部分にしかつかず、 また子要素(div,span,p,table,td,...)がある部分で消えてしまう。 またこれらの要素では背景位置,繰り返し指定が効かない。
		背景位置指定をした場合、指定位置から右下方向にしか背景がつかず(IE4と同じ) パーセントやキーワード以外はピクセル値で指定しても反映されない。
		外部スタイルシート内の背景画像の指定を無視。 →同じファイル内でstyleタグかインラインによりbackground:...で指定

		「font-family:'...';」と書くと後続の指定が無効に。 例えば「font-family:'ＭＳ Ｐゴシック';」は不可。「""」を使う。
		font-familyに複数の値を列挙する場合、並べた値全体を「""」で括らないと 2番目以降の指定を無視。 「font-family:Osaka,'ＭＳ Ｐゴシック'...」は不可。 「""」でリストを囲めばIE3.0では通る。 前の項目と違い無視されるのは一緒に指定したもののみ。 但しそうするとCSS非標準の可能性あり。
		font-familyに「Times New Roman」「Arial」「Courier」「Courier New」 を指定すると日本語が文字化け。複数指定時も これらが採用されると文字化け。
		単位em,exがとても小さい。 文字サイズ(font-size)指定に使うと字が小さくなり、 またline-heightに使うと行が重なって読めない。 font-sizeやline-height指定時には1[em]=1[ex]=1.3[px]ぐらい。 text-indent指定時には ほぼ1[em]=1[ex]=1[px]。
		line-heightを指定した行に img,table,textarea,object,iframe,marquee等があると それらが他の行に重なってしまう。 Netscape 4.xと異なりブロック要素でも発生するので注意。 また重なり方も少し違う。
		line-heightに数値を指定するとピクセル値として解釈してしまい 行が重なってしまう。
		「normal」がサポート外。 font-style,font-weightに指定しても親要素での指定を継承してしまう。 line-heightに指定すると0[px]として解釈？する為か行が重なってしまう。

		リンク色の指定で a:hover,activeは動作しない (a:link,visitedはOK)。 また a:linkが指定されてない時にa:hover等の指定があるとリンク色が その色になってしまう。
		同様に<a name=...>...</a>内の文字列にa:hover等の色が割当てられる。
		配置関係(position,top,left,right,bottom,z-index,float) はサポート外。
		表示属性(visibility,display) はサポート外。
		リスト,テーブル関係,filter等IE独自拡張もサポート外。
		フォーム(<input type=text>, <textarea>)にwidth,heightを指定しても 反映されない

先の項目の要点をまとめてみました。 以下のような事柄に注意するといいでしょう。

		headタグ内でのスタイルの指定は 最後に置かれたもの、linkタグによる指定が 優先されどれか１つのみ採用される。
		クラス名やID名にアンダースコア「 _ 」、ハイフン「 - 」を使わない。
		定義の上書きが出来ないので注意する。
		ブロック、配置、表示、リスト、テーブル関係の指定は殆ど動作しない。 fontやtext,color,backgroundを中心に幾つかが動作。
		背景指定は「background-...」を使わず「background」で一括指定。
		margin指定はピクセル値の列挙ができないこと、子孫要素への継承に注意。
		ブロック系のデザインをIE3でも反映させたい場合はスタイルシートを使わずに tableタグでデザインする。
		フォント指定時に「font-family:'...'」としない。「" "」を使う。
		フォント指定時に「Times New Roman」「Arial」「Courier」「Courier New」を 先頭に指定しない。
		複数フォント指定をする場合「font-family...」は同じ記述内で最後に置く。
		line-heightを指定した行にはテキスト以外を置かない。
		値にem,ex,normalは使わない。em,exは単位が10倍程ずれている。
		思った表示にならなくても内容が伝わればいいと考える。