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

HTML,CSSバグ&回避法リスト
 ■ 3. Netcape4.xとスタイルシート

【このページ内のトピック: 「Ctrl-矢印」でフォーカス移動・「G/T」連打で自動ナビ】
3.1 ブロックの背景色がうまく塗られない
3.2 ブロックのデフォルトの幅が小さい
3.3 インライン指定時にフォント,前景色指定無視
3.4 インライン指定時にフォント,前景色指定が前後に波及
3.5 連続要素でフォントサイズ継承
3.6 和名フォント指定時にスタイル指定無視
3.7 line-heightを指定した要素に画像があると行がずれる
3.8 画像・リスト項目・フォームでは表示が崩れる
3.9 class名,ID名にアンダースコアを使うと指定無視(NS4.6-)
3.10 インライン指定時にハイフンで始まる属性を使うと指定無視
3.11 外部スタイルシート内の相対パスの扱いに問題
3.12 その他のNS4のバグ
3.13 NS4対策の勘所

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

スタイルシートはHTMLに比べれば新しい技術で、 初期に実装されたブラウザ(特にNS4,IE3)ではバグや癖が多いです。 他にも沢山ありますが ここでは特に問題になりそうなものを中心に書いています。

NS4では CSS指定が崩れる場合がとても多いので、 対応したい場合は 実際にブラウザで表示させて確認したほうがいいでしょう。

2003/08/03追加: Netscape4.xの普及率は下がりつづけ現在 0.6%程度 (onestat.com 03/07/28発表) です。 JavaScriptのレイヤーやスタイルシートでの膨大なバグと それへの対応コストを考慮すると 本文理解に差支えない見栄え系の機能はNS4非対応でもいいでしょう。

 ■ 3.1 ブロックの背景色がうまく塗られない

「style="background-color:cyan;"」などと背景色の指定をしても Netscape4では文字列がある部分にのみ着色されたり、 場合によっては全く色が塗られなかったりします。

【背景色指定が反映されず(NS4)】
<div style="background-color:cyan;">...</div>
この例では
背景色が全く塗られません。

これを解決するには以下の方法が考えられます。
border属性も指定する(枠が不要な場合は border:noneも可)
同じ色の画像を作って背景画像を設定する(background-image:url(...))
スタイルシート使わずテーブルのtdセルで背景色を設定する(<td bgcolor=...>)

【border:noneを指定して解決】
<div style="background-color:cyan; border:none;">...</div>
border:noneを指定すると
ボックス要素の全体に背景色が塗られます。

 ■ 3.2 ブロックのデフォルトの幅が小さい

Netscape4では divタグのデフォルトのブロック幅は 他のブラウザの場合に比べて小さく、 ブロックの中身に合わせているようです(width:auto指定時も)。

【デフォルトの枠幅が要素の中身に合わせられる(NS4)】
<div style="border:solid thin;">...</div>
Netscape4.xではwidth(or margin)値を明示しないと
ブロックの幅が小さめになる

width:100%を指定するか margin:0px(margin-left or right:0px;)等とすれば 他のブラウザのように横全体に表示されるみたいです。

【margin:0px;を指定して解決】
<div style="border:solid thin; margin:0px;">...</div>
Netscape4.xではwidth(or margin)値を明示しないと
ブロックの幅が小さめになる

 ■ 3.3 インライン指定時にフォント,前景色指定無視

ブロック要素に対しインラインでborderとwidthの両方を指定した場合、 フォントや前景色の指定が無視されるようです。

【文字や色の設定が反映されず(NS4)】
<div style="border:outset; width:400px; font-size:20px; font-weight:bold; color:blue;">...</div>
borderとwidthの両方を指定すると NS4では文字・色設定が反映されません。

いろいろ試してみたところ 例えば下記の場合に発生するようです。

注:下記以外の場合でも頻繁に起こります。

まず、一般のブロック要素に対しては インラインで borderの指定をしている場合(border:noneも含む)に頻繁に発生するようです。
borderとwidthの両方を指定している
borderとmarginの両方を指定している
border指定をした要素(orテーブルセル)内に またborder指定した要素がある(多重ブロック)
入れ子にしたブロックの内外両方で問題発生。

そしてテーブルの場合 border指定の有無に関わらず
テーブルセル(<td>)内にまたテーブルがある(多重テーブル)
入れ子にしたセルの内外両方で発生。
テーブルセルの中身が指定したwidth値より大きい

上記の各々に該当する場合でも隣接するタグやオプションによっては 問題が発生しない場合もあります。

解決するには
インライン指定を使わず外部スタイルシートやheadタグ内のstyle指定を使う
指定をしたい要素を 再度divタグやspanタグなどで囲って直接スタイル指定をする
など工夫してみて下さい。

【該当部を再度タグで囲ってスタイル指定し解決】
<span style='font-size:20px; font-weight:bold; color:blue;'>...</span>
NS4では別にspanタグなどを使って 文字、色を直接指定する。
注:このとき 次の項目の内容に注意する必要があります。

 ■ 3.4 インライン指定時にフォント,前景色指定が前後に波及

前の項目と同じ条件下で タグ内にスタイル指定をした要素がある場合 その内容が隣り合う文字列にまで適用されることがあります。

【スタイル指定が前後要素にまで適用される(NS4)】
<div style="border:outset; width:400px;">...<div style='font-size:20px; font-weight:bold; color:blue;'>..</div>...</div>
divタグの前の文字列
divタグで文字、色を指定(NS4では前後要素に影響)。
divタグの後の文字列

ブロック内に 改行タグ<br>や空のdivタグを置くと解消する場合があります。

多重時には入れ子になった部分を空のdivタグで囲って試してみて下さい。
或いは 始めからスタイルシートを使わず <font size=... color=...>としてもいいかも知れません。

【改行タグを追加して解決】
...<br><div style='font-size:20px; font-weight:bold; color:blue;'>..</div>...
divタグの前の文字列(ここにbrタグ追加→)
divタグで文字、色を指定(NS4では前後要素に影響)。
divタグの後の文字列

実験ページ:CSS指定が前後要素にまで適用される

 ■ 3.5 連続要素でフォントサイズ継承

Netscape4では要素が連続していると 入れ子になっていなくても 文字サイズを継承するようです。 文字サイズの指定に「%」や「em」「ex」を使う場合には注意が必要です。

【%使用時に前の要素がフォントサイズの基準に(NS4)】
<div style='font-size:20px;'>...</div><div style='font-size:120%;'>...</div>
font-size:20px指定
font-size:120%指定

これは前の要素との間に 単にスペース(改行可)を入れると解消する場合があります。

【前の要素との間に改行をいれて解決】
<div style='font-size:20px;'>...</div>(改行)<div style='font-size:120%;'>...</div>
font-size:20px指定
font-size:120%指定

実験ページ:%を使ってフォントサイズ指定

NS4ではline-heightでも前の要素のfont-sizeを基準にすることがあります。 3.12 その他のNS4のバグ

 ■ 3.6 和名フォント指定時にスタイル指定無視

Netscape4では日本語名フォント(「MS ゴシック」等フォント名に2バイト文字を含む) を指定するとフォント以外の指定まで無視します。

また欧文フォントやserif,cursive等の一般フォントファミリーを指定した場合でも [表示]→[文字コード セット]が日本語になっていると 指定が多くのケースで反映されないようです (この場合は先と異なりfont-family指定のみ無視)。

日本語と英語が混在している文章ではフォント指定は難しいです。

日本語が混在したページでは 「文字コードセット」を「欧米(ISO-8859-1)」に切替えても 日本語表示のままになることがあります。 英語で表示させたい場合は以下をheadタグ内に追加します <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

同様にNetscape6では外部スタイルシート内で日本語名フォントを指定すると font-family指定を無視します(Netscape7.0では大丈夫です)。 これについては 「@charset "Shift_JIS";」をファイルの先頭に加えると解決します。

【日本語名のフォントを指定するとスタイル指定全て無視(NS4)】
<div style="font-family:'MS ゴシック'; font-size:20px; color:blue; border:outset; ">...</div>
美しい日本語 StylishEnglish
この例をIE3.0で見ても同様にスタイル指定全体が無視されます。 フォントやテキストについての問題

実験ページ:日本語フォント指定時のCSSバグ

NS4で反映されるかは別として とりあえず日本語フォントの指定をしたい場合は フォント指定とそれ以外の指定を別々の場所で行うようにします。 例えば
フォント指定のみはインラインでやる。
クラスとIDを使い分ける。IDで日本語の指定をする。
フォント指定に別のタグを用意し入れ子にする。

或いはCSSの代わりに fontタグを使い<font face=...>でも指定できます。

fontタグを使った場合は日本語表示でもフォント指定が反映されるようです。 しかしながらW3Cによれば fontタグは廃止予定だそうです。。。

 ■ 3.7 line-heightを指定した要素に画像があると行がずれる

Netscape4ではline-heightを指定した要素内に高さのある画像 (指定のline-height値より高い) があると その行の位置が上下にずれるようです。
embedタグでも発生するようです。
またIE3.0でも同様の問題が発生します。フォントやテキストについての問題

実験ページ:line-height指定と画像タグ

実験ページの様に行が上下逆転したり 画像の高さによっては重なったりします。 文中に置く画像は小さめにするかline-heightを指定しない方がいいでしょう。

 ■ 3.8 画像・リスト項目・フォームでは表示が崩れる

画像に枠を指定すると表示崩れる
<img>タグにborderを指定すると画像に枠がつかずに 近くに空のボックスができてしまいます。

追加: width,margin,padding等を指定した場合に画像の位置がずれてしまい 他の要素と重なる事があります。 これについては display:blockを指定すると解決する場合があります。
リストの項目にスタイルを指定すると表示崩れる
リストの各項目の指定に使われる<li>, <dt>, <dd>タグにスタイルシートを 適用すると指定が無視されたり不自然な表示がなされます。

borderを指定したときには画像の場合と同じく 空のボックスができます。 また背景画像を指定すると改行が入ったり font属性を指定しても思ったように 反映されません。

リストの項目にスタイル指定をしたい場合は 別にタグで括って指定する 必要があります。

フォームに枠や背景画像を指定すると表示崩れる
border属性を指定した場合、背景画像を指定した場合に フォームオブジェクトが表示されなかったり 逆に余計なボックスが表示されたりします。

Netscape4では <select>や<textarea>には入力さえできなくなるので注意が必要です。

追加:margin,padding等を指定した場合も異常が起こる事があります。 これについては display:blockを指定すると解決する場合があります。

 ■ 3.9 class名,ID名にアンダースコアを使うと指定無視(NS4.6-)

NS4.05,4.08,4.5,4.61などでは スタイルシートのclass名やID名に アンダースコア(アンダーバー?)「 _ 」を使っていると スタイルが適用されません。
代わりにハイフン「 - 」を使った指定があるとそちらを採用することがあります。 「class="a_b"」と書くと「a-b {...}」という指定を参照するようです。
IE3.0,IE4.0,NS6.0でも似たような問題が発生します。 (NS6.1では起きません。)
手軽なブラウザ分岐に使えるかと思ったのですが NS4.75,NS4.8では適用されます。

実験ページ:スタイル指定にアンダースコアを使用

 ■ 3.10 インライン指定時にハイフンで始まる属性を使うと指定無視

スタイルシートの指定をインラインで行う時に属性名にマイナス記号「-」から 始まるものがあると全体の指定を無視するようです。 「-moz」で始まるものも含まれるので Mozilla系の拡張CSSを指定する時には ファイル先頭部のstyleタグ内か別ファイルに記述した方がいいでしょう。

【-moz-box-sizingをインラインで使用(NS4ではスタイル全体が適用されず)】
<div style="width:200px; border:solid; padding:20px; background:skyblue; -moz-box-sizing:border-box;">...</div>
NS4ではスタイル指定無視

 ■ 3.11 外部スタイルシート内の相対パスの扱いに問題

外部スタイルシートで画像を相対パスで指定した時には、 その基底パスは 外部スタイルシートのパスになるのが普通です。 しかしNetscape4ではスタイルシートを読み込んだHTMLファイルのパスになります。

実験ページ:外部スタイルシートと相対パス

これに対応するには
外部スタイルシートをHTMLと同じディレクトリに置く
ページを複数ディレクトリに置きたい時に 各々に CSSファイルのコピーを作るのは 気が引けるかもしれません。 ファイルをシンボリックリンクしたり(UNIX利用時)、 Webサーバでパス名をaliasしてもいいでしょう。
画像のパスを全て絶対パスにする
サーバーを通さないローカル環境だとページ編集が面倒になります。
スタイル指定はHTMLファイル内で行う
読み込まれない画像が単純な背景画像で ページの内容を理解する上で 必要のない場合は、 特に対応しなくてもいいかも知れません。 代わりに背景色を指定しておきましょう。

 ■ 3.12 その他のNS4のバグ

スタイルシート指定時の問題
IDセレクタにタグ名をつけて例えば「div#id」等とすると「div #id」として解釈。
セレクタに「 * 」を使えない。「*.class」とすると無視される。

ブロック関係の問題
<table>タグでは背景色以外の多くの指定が反映されないか誤動作。
<table>タグにmargin(-left,right)を指定すると直前の要素の右端が消えることがある。
テーブルの右端より右側に伸びる要素が他に無い場合、 テーブルの前のspan要素の右側の部分が表示されないことがある。 通常のページでは起こらないが短いHTMLだと発生しやすい。
枠線と背景色、背景画像指定部との間に隙間ができる。
幅を指定したボックスの中身が外に飛び出すことがある。border指定が必要(border:none可)。
marginやpadding指定がボックスの右側には効かないことがある。border指定が必要(border:none可)。
テーブルの<td>タグにインラインでスタイル指定をした場合 (<td style="...">)、 ウィンドウのリサイズや再読み込みで スタイルシートが適用されたり外れたりする。
widthを数値で指定(CSSかHTMLオプションで)すると外れにくくなる。
divボックスに「align=...」を指定したりスタイルシートで 「text-align」を指定すると中身でなくボックス自体が位置付けされる。
「text-align」指定時は中身も一緒に位置付け。
背景画像で「background-repeat」を指定しボックスの一部のみに画像を敷いた場合 画像が無い部分がリフレッシュされない。 具体的には他のウィンドウが一時的に該当部に重なり、その後移動したときに 該当部に重なっていた時の内容が残像として表示され続けてしまう。
一応再読み込みすれば消えます。
同上の場合で背景画像の指定を「background-image」ではなく「background」 を使い一括指定する場合、画像の無い部分が黒色になってしまう。
文字色が黒(デフォルト)だと全く文章が読めなくなるので注意。
「background-image」を使うようにする。 IE3対策のためにやむを得ず「background」を使う時は背景色も指定しておく。
ボックスやテーブルが入れ子になっている場合 背景画像が子要素に継承され個別に貼られてしまう。
「background-attachment」「background-position」はサポート外。
「overflow」はサポート外。はみ出た分だけブロックの指定サイズが拡大される。
「position:absolute」を指定したレイヤでフォームと重なる部分が描画されず 下のテキストエリアなどが表示されてしまう。z-indexで手前に配置しても駄目。
フォームをレイヤにおき重なり時はフォームを非表示にします。

フォントやテキストについての問題
line-heightを数値で指定した場合に計算後の高さを継承してしまう。
数値で指定してもパーセントで指定した場合と効果が同じになる。
「line-height:normal」としても親要素の値を継承してしまう。
子要素側でもline-height値を明示的に示す。
line-heightを相対値(%,em,ex,数値)で指定した場合、 タグの中身によっては直前にspan系要素があると line-heightの基準値をspan系要素のfont-sizeにすることがある。
改行タグ等を入れると解消するかも。
line-heightを指定した行の位置が真中ではなく上下どちらかに偏る。
borderにridge,groove以外の値を指定すると line-heightやtext-alignの 指定を無視。
中身によっては稀に反映されることがある。 widthかmargin(-left,right)を指定して解決。

その他
フォーム(<input type=text>, <textarea>)に width,heightを指定しても反映されない。
visibilityはposition:absolute,relativeを指定しないと反映されない。
layer,ilayerタグにはvisibility属性がありこれによっても可視性を設定できます (NS4限定)。

 ■ 3.13 NS4対策の勘所

以上見てきたようにNS4にはCSSに関して数多くの問題があります。 対処法としては NS4か否かにより適用するスタイルシートを峻別するなどの 工夫をします。

NS4のバグを避けるには 大まかに言って以下のような工夫をするといいでしょう。 万全ではないですが幾つか典型的なものを避けられます。
インライン指定は必要最小限に。
クラス名やID名にアンダースコア「 _ 」を使わない。
セレクタに「 * 」を使わない。
外部スタイルシート内で画像を指定する時はパスの扱いに注意する。
一緒に和名フォントも指定した記述は無効になることを想定しておく。
ブロック系要素で問題が起きた時は border(none可),width,margin等を指定してみる。
画像やリスト、フォームへのスタイルシートの適用には注意する。





ページの先頭へ     

前のページへ
次のページへ
HTML,CSSバグ&回避法リスト 目次 【数字キーでアクセス】
例 : 「2.1節」は「2」キーを2回連打して移動。「Q or P」で戻る。
「Ctrl-矢印」でフォーカス移動。
1. 目次
2. HTML関連
3. Netcape4.xとスタイルシート
3.1 ブロックの背景色がうまく塗られない
3.2 ブロックのデフォルトの幅が小さい
3.3 インライン指定時にフォント,前景色指定無視
3.4 インライン指定時にフォント,前景色指定が前後に波及
3.5 連続要素でフォントサイズ継承
3.6 和名フォント指定時にスタイル指定無視
3.7 line-heightを指定した要素に画像があると行がずれる
3.8 画像・リスト項目・フォームでは表示が崩れる
3.9 class名,ID名にアンダースコアを使うと指定無視(NS4.6-)
3.10 インライン指定時にハイフンで始まる属性を使うと指定無視
3.11 外部スタイルシート内の相対パスの扱いに問題
3.12 その他のNS4のバグ
3.13 NS4対策の勘所
4. スタイルシートその他の話題
5. ブラウザ別にスタイルシートを指定
6. その他・総合


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