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

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

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

これを解決するには以下の方法が考えられます。

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

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

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

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

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

まず、一般のブロック要素に対しては インラインで borderの指定をしている場合(border:noneも含む)に頻繁に発生するようです。

		borderとwidthの両方を指定している
		borderとmarginの両方を指定している
		border指定をした要素(orテーブルセル)内に またborder指定した要素がある(多重ブロック) 入れ子にしたブロックの内外両方で問題発生。

そしてテーブルの場合 border指定の有無に関わらず

		テーブルセル(<td>)内にまたテーブルがある(多重テーブル) 入れ子にしたセルの内外両方で発生。
		テーブルセルの中身が指定したwidth値より大きい

解決するには

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

など工夫してみて下さい。

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

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

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

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

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

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

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

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

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

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

NS4で反映されるかは別として とりあえず日本語フォントの指定をしたい場合は フォント指定とそれ以外の指定を別々の場所で行うようにします。 例えば

		フォント指定のみはインラインでやる。
		クラスとIDを使い分ける。IDで日本語の指定をする。
		フォント指定に別のタグを用意し入れ子にする。

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

Netscape4ではline-heightを指定した要素内に高さのある画像 (指定のline-height値より高い) があると その行の位置が上下にずれるようです。

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

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

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

リストの各項目の指定に使われる<li>, <dt>, <dd>タグにスタイルシートを 適用すると指定が無視されたり不自然な表示がなされます。

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

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

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

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

NS4.05,4.08,4.5,4.61などでは スタイルシートのclass名やID名に アンダースコア(アンダーバー？)「 _ 」を使っていると スタイルが適用されません。

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

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

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

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

これに対応するには

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

読み込まれない画像が単純な背景画像で ページの内容を理解する上で 必要のない場合は、 特に対応しなくてもいいかも知れません。 代わりに背景色を指定しておきましょう。

		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」を使う時は背景色も指定しておく。

ボックスやテーブルが入れ子になっている場合 背景画像が子要素に継承され個別に貼られてしまう。 参考：2.6 多重テーブル(ブロック)の背景処理(NS4)

「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限定)。

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

NS4のバグを避けるには 大まかに言って以下のような工夫をするといいでしょう。 万全ではないですが幾つか典型的なものを避けられます。

	インライン指定は必要最小限に。
	クラス名やID名にアンダースコア「 _ 」を使わない。
	セレクタに「 * 」を使わない。
	外部スタイルシート内で画像を指定する時はパスの扱いに注意する。
	一緒に和名フォントも指定した記述は無効になることを想定しておく。
	ブロック系要素で問題が起きた時は border(none可),width,margin等を指定してみる。
	画像やリスト、フォームへのスタイルシートの適用には注意する。