■キー割当表示 [Shift-H] ─ KeyNavi:キーボードを活用して 
ホームページを快適に─
 
ホーム [0] HTML,CSSバグ&回避法リスト:1.目次 [1] 4. スタイルシートその他の話題 ・サイトマップ [Shift-S]

HTML,CSSバグ&回避法リスト
 ■ 4. スタイルシートその他の話題

【このページ内のトピック: 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
4.1 どの属性がどの要素にどう継承するか不統一
4.2 ブロックの幅が指定したwidth値より大きい(NS6,NS7,OP6)
4.3 width:100%を指定すると親要素の幅を超える(NS6,NS7,OP6)
4.4 入れ子テーブルでmargin指定すると横幅超過(IE4,5,6)
4.5 float指定時の問題(各ブラウザ)
4.6 特定フォントを指定すると文字化け(IE4)
4.7 その他のCSSバグ
4.8 IE4+,NS6+,Opera対策の勘所(暫定)
4.9 IE3のバグや癖など
4.10 IE3対策の勘所

注1: 「NS,NN=Netscape Navigator」「IE=Internet Explorer」の略です。
注2: ブラウザ名で特に指定が無いものはWindows版についての記述です。
注3: スタイルシートについては、特に断りの無い限り互換モードについての記述です。

 ■ 4.1 どの属性がどの要素にどう継承するか不統一

実験ページ:スタイルシート各属性の継承、ボックス、文字サイズ
標準モード  互換モード  指定無し  XHTML版
tableタグと継承
標準モードの場合、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以外)。

Hnタグと継承
(FixME)

属性line-heightの継承のされ方
「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は大丈夫。
などと動作にばらつきがあります。

IE3.0の場合は継承とは関係ないですが normal,数値,[em][ex]で指定すると行が重なってしまいます。

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

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

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

NS4では直前の要素のfont-sizeが基準値になる事があります(バグ)。3.5 連続要素でフォントサイズ継承

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

IEのデフォルトの文字サイズが16pxなので 49%だと8px程度になり判読が難しくなります。

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

先に述べたように IE3.0以外の多くのブラウザでは tableタグを使えばfont-sizeの継承を受けないようにできます (互換モード(デフォルト)時)。
またIE3.0の場合でもテーブル内か否かに関わらず パーセントによる相対指定では算出時に継承値を使いません。
これを逆手にとってパーセントによるフォントサイズ指定に 利用してもいいかも知れません。

 ■ 4.2 ブロックの幅が指定したwidth値より大きい(NS6,NS7,OP6)

ブロック要素のwidth値の解釈は IE4,5,6,NS4などではブロック全体の幅、 NS6,7,Opera6ではブロックのborder値とpadding値を除いた幅になるようです。
追加:Opera7.0(正式版)ではIEに合わせてブロック全体の幅になったようです。

【width:200pxを指定した例 (NS6,7では横幅が2*20+2*10=60px超過)】
<div style="width:200px; padding:20px; border:10px solid;">...</div>
Netscape6,7で横幅超過

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

【(-moz-)box-sizing:border-boxを追加 (NS6,7で解決,OP6で駄目)】
<div style="width:200px; padding:20px; border:10px solid; -moz-box-sizing:border-box; box-sizing:border-box;">...</div>
Netscape6,7ではOK

上の例をNS4で見ると3.10 インライン指定時にハイフンで始まる属性を使うと指定無視の為スタイル全体が適用されません。 「-moz...」を使う時はインライン指定をしないようにした方がいいでしょう。

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

【width:200pxの指定は外側に用意したdivタグで行う (NS6,7で解決,NS4で駄目)】
<div style="width:200px;"><div style="padding:20px; border:10px solid;">...</div></div>
Netscape6,7ではOK

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

【width:200pxの指定を外側のdivタグで行い内部のdivタグではwidth:100%指定 (NS6,7で横幅超過)】
<div style="width:200px;"><div style="width:100%; padding:20px; border:10px solid;">...</div></div>
Netscape6,7で横幅超過

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

【width:200pxの指定を外側のdivタグで行い内側のdivタグではmargin:0pxを指定して解決】
<div style="width:200px;"><div style="margin:0px; padding:20px; border:10px solid;">...</div></div>
Netscape4,6,7でもOK

まとめ:ブロックの幅を正確に指定する方法 (IE4+,NS4,NS6+,Opera)
枠線やpaddingがあるブロックで 外側の幅を正確に指定したい場合の記述。

【borderやpaddingがあるブロックでの横幅指定 (互換性重視)】

<div style="width:200px;">
<div style="margin:0px; padding:20px; border:10px solid;">
...中身...
</div>
</div>

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

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

【table要素でのwidth指定】
<table width=300 border=10 cellpadding=20 cellspacing=0><tr><td>...</td></tr></table>
table width=300

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

【td要素でのwidth指定】
<table border=10 cellpadding=20 cellspacing=0><tr><td width=100>...</td><td width=100>...</td></tr></table>
td width=100
td width=100

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

 ■ 4.3 width:100%を指定すると親要素の幅を超える(NS6,NS7,OP6)

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

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

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

【幅200を指定したtdセル内にwidth100%のブロックがある (NS6,7で2*20+2*10=60だけ横幅超過)】
<td width="200"><div style="width:100%; padding:20px; border:10px solid;">...</div></td>
Netscape6,7で横幅超過

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

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

【margin:15px;と-moz-box-sizing:border-box;を追加 (NS6,7とOP6でmargin値だけはみ出る)】
<td width="200"><div style="width:100%; padding:20px; border:10px solid; margin:15px; -moz-box-sizing:border-box; box-sizing:border-box;">...</div></td>
Netscape6,7で横幅超過

 ■ 4.4 入れ子テーブルでmargin指定すると横幅超過(IE4,5,6)

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

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

上記と違って親要素がdivの場合、 つまりwidthを指定したdiv要素内にテーブルがある場合は起こりません。

【入れ子テーブルはmargin値だけ余計に大きくなる (IE4,5,6)】
<td width="200"><table style="margin:20px;">...</table></td>
abc def ghi jkl mno abc def ghi jkl mno

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

下の例ではmargin:20pxとしていますがpadding:20pxとしても発生するようです。

【tableタグの外側を囲ったdivタグでmarginを指定しても解決せず】
<td width="200"><div style="margin:20px;"><table>...</table></div></td>
abc def ghi jkl mno abc def ghi jkl mno

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

【width:100%のdivタグで囲って解決 (IE5+のみ)】
<td width="200"><div style="width:100%;"><table style="margin:20px;">...</table></div></td>
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を指定します。

【width、marginを指定するdivタグを重ねて解決】
<td width="200"><div style="width:100%;"><div style="margin:20px; border:0px none;"><table>...</table></div></div></td>
abc def ghi jkl mno abc def ghi jkl mno

「border:none」はNS4のバグ対策です。これがないと右側の余白ができません。
まとめ:マージンを指定する無難な方法 (IE4+,NS4,NS6+,Opera)
余白を指定するのに 親タグが<td width=...>であり 且つ中身にwidth指定の無いテーブルが含まれる場合でも 中身がはみ出さないように配慮した方法。

【無難にマージンを指定する方法】

<td width="200">
...
<div style="width:200px or 100%;">
<div style="margin(or padding):20px; border:0px none;">
...中身...
</div>
</div>
...
</td>

(勘違いしていたらお知らせください :-)

 ■ 4.5 float指定時の問題(各ブラウザ)

CSSによるフロート指定は厳密に要素の位置を決めるわけではないので HTMLの場合と同様 予想外の表示がなされることがあります。 例えば「style="float:right;"」を指定した場合
ウィンドウ幅を大きくしても常に横スクロールバーが表示される(IE4)
float:rightを指定した要素が親要素の枠の外に表示される(NS4)
背景(色,画像)が指定されている場合に一部の文字列が消えることがある(IE6)
03/05/18更新:
・line-heightが指定されていると消えない模様。
・下記の各例ではline-heightの継承を避けるため tableタグを使用。
これらは親要素でwidthを指定(auto以外)すれば解決するようです。

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

【float:rightで指定された内容が枠の外へはみ出す (Netscape4)】
【背景指定がある場合にfloat:right指定周辺の文字列が表示されず (IE6)】
<div style="background-image:url(haikei.jpg);">...<div style="float:right;">..</div>...<div style="clear:both;"></div>...</div>
これはfloat:right指定されたブロックの前にある文字列です。
IE6では表示されません。
<div style="float:right; border:solid thin; width:200px;">指定
これは回り込んでいる文字列です。
IE6では表示されません。
直前に<div style="clear:both;">を置き回りこみ解除。

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

【背景指定がある場合に align=right指定周辺の文字列が表示されず (IE6)】
<div style="background:skyblue;">...<img src="tori.jpg" align="right">...<br clear="all">...</div>
これはalign=rightとした画像の前にある文字列です。
IE6では表示されません。 これは回り込んでいる文字列です。
IE6では表示されません。
直前に<br clear="all">を置き回りこみ解除。

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

【width:100%を指定して上記バグを回避】
<div style="background-image:url(haikei.jpg); width:100%;">...</div>
これはfloat:right指定されたブロックの前にある文字列です。
IE6では表示されません。
<div style="float:right; border:solid thin; width:200px;">指定
これは回り込んでいる文字列です。
IE6では表示されません。
直前に<div style="clear:both;">を置き回りこみ解除。

IE6で表示されない文字列は 矢印キー、PgUp、PgDownキーでページを上下にスクロールをしていると 再度表示されたり消えたりする。 またマウスをドラッグしてテキスト色を反転させても同じような現象が発生。 再読み込みするとまた消えます。面白いです。
IE4では「float:right」を指定したボックス内の文字列も右寄せされています。 そのため必要に応じて「text-align:left」も指定します。

 ■ 4.6 特定フォントを指定すると文字化け(IE4)

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

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

 ■ 4.7 その他のCSSバグ

スタイルシート指定時の問題
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」が採用されると 内臓フォントによっては文字化けする。
「sans-serif」指定の前に「MS Pゴシック」などを必ず書いておく。
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=...」を実行しても 表示されている場所とは異なる位置に移動。 またスクリプトで逆算した位置も別の位置にずれていることも。

 ■ 4.8 IE4+,NS6+,Opera対策の勘所(暫定)

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

 ■ 4.9 IE3のバグや癖など

あまり使われなくなった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:'MS Pゴシック';」は不可。「""」を使う。
font-familyに複数の値を列挙する場合、並べた値全体を「""」で括らないと 2番目以降の指定を無視。
「font-family:Osaka,'MS Pゴシック'...」は不可。 「""」でリストを囲めば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を指定しても 反映されない

 ■ 4.10 IE3対策の勘所

先の項目の要点をまとめてみました。 以下のような事柄に注意するといいでしょう。
headタグ内でのスタイルの指定は 最後に置かれたもの、linkタグによる指定が 優先されどれか1つのみ採用される。
クラス名や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倍程ずれている。
思った表示にならなくても内容が伝わればいいと考える。




ページの先頭へ     

前のページへ
次のページへ
HTML,CSSバグ&回避法リスト 目次 【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。
1. 目次
2. HTML関連
3. Netcape4.xとスタイルシート
4. スタイルシートその他の話題
4.1 どの属性がどの要素にどう継承するか不統一
4.2 ブロックの幅が指定したwidth値より大きい(NS6,NS7,OP6)
4.3 width:100%を指定すると親要素の幅を超える(NS6,NS7,OP6)
4.4 入れ子テーブルでmargin指定すると横幅超過(IE4,5,6)
4.5 float指定時の問題(各ブラウザ)
4.6 特定フォントを指定すると文字化け(IE4)
4.7 その他のCSSバグ
4.8 IE4+,NS6+,Opera対策の勘所(暫定)
4.9 IE3のバグや癖など
4.10 IE3対策の勘所
5. ブラウザ別にスタイルシートを指定
6. その他・総合


ホーム [0] HTML,CSSバグ&回避法リスト:1.目次 [1] 4. スタイルシートその他の話題 ・サイトマップ [Shift-S]
■キー割当表示 [Shift-H] ─ KeyNavi Project 2003 ─