スタイルシート関連のバグ

とほほのWWW入門 > とほほのスタイルシート入門 > スタイルシート関連のバグ
1999年6月27日版
スタイルシートに関するブラウザのバグ、IEとNNでの動作の違い、注意点などを紹介します。

BODYに対するフォント設定がテーブル内フォントに効かない

【影響度】大、【確認ブラウザ】NN4.0(Win)
【現象】NN4.0では、BODY { color:red; font-size:16pt; } などと指定しても、テーブル内のテキストには適用されない。このために、テーブル内が真っ黒で見えないページが多い。BODY, TH, TD { ... } とする必要がある。

BODYに対するマージン指定がテーブルに対して効かない

【影響度】大、【確認ブラウザ】NN4.0(Win)
【現象】BODY { margin-left:50; margin-left:50 } なんてのはよくやる手だが、NNでは、これを指定しても、テーブルの右マージンには適用されない。テーブルのみが右側にはみ出した歪なレイアウトになってしまう。

フォントサイズの解釈が異なる

【影響度】大、【確認ブラウザ】NN4.0(Win)
【現象】IEとNNでフォントサイズなどの長さの解釈が異なる。in, cm, mm, pt, pcは絶対単位、em, ex, pxは相対単位と定義されているが、NN4.0ではpxのみが固定サイズ(ブラウザのフォント指定によって大きさが変わらない)、IE4.0ではem, exを除くものすべてが固定サイズとなる。下手にフォントサイズを指定すると、他のブラウザで大きすぎたり小さすぎたりする。

<LINK REL="stylesheet">を指定すると<STYLE>が効かなくなる

【影響度】中、【確認ブラウザ】IE3.0(Win)
【現象】<LINK REL="stylesheet" HREF="...">で外部スタイルシートファイルを読み込むと、内部で指定している<STYLE>〜</STYLE>が全く無視されてしまった。

フィルタを指定するとネスケのテーブルが崩れる

【影響度】中、【確認ブラウザ】NN4.01(Win)
【現象】NN4.0ではサポートされていないはずのフィルタを使用すると、テーブルのカラムが連結していまい、レイアウトが無茶苦茶になる。
  <TABLE BORDER=1>
  <TR>
  <TD><IMG SRC="xx.gif" STYLE="filter:Gray()"></TD>
  <TD><IMG SRC="xx.gif" STYLE="filter:Gray()"></TD>
  </TR>
  </TABLE>

レイヤとポジショニングを組み合わせるとスタイルシートが解除される

【影響度】中、【確認ブラウザ】NN4.01(Win)
【現象】レイヤの内部でポジショニングを使用すると、それ以降、スタイルシートの指定が解除されてしまう。
   <STYLE><!-- H4 { color:red } --></STYLE>
   <H4>これは赤です</H4>
   <ILAYER>
   <IMG SRC="xx.gif" STYLE="position:absolute">
   </ILAYER>
   <H4>これは黒になってしまいます</H4>

IEとNNで要素の横幅が異なる

【影響度】小、【確認ブラウザ】IE4.0(Win)&NN4.01(Win)
【現象】<DT>や<DD>などの要素に background:red を指定すると、NNでは文字の部分だけの背景色が変わるのに対し、IEでは1行分すべての背景色が変わってしまう。

<DD>に対するマージンの解釈が異なる

【影響度】小、【確認ブラウザ】IE4.0(Win)&NN4.01(Win)
【現象】<DD>に対して margin-left を指定すると、IEでは<DT>要素の位置を始点とするのに対し、NNでは通常の<DD>要素の位置を始点としてしまう。

ブラウザをリサイズするとスタイルシートが無効になる

【影響度】中、【確認ブラウザ】NN4(Mac)
【現象】NN4のMac版(詳細バージョン不明)だと、ウィンドウをリサイズした際に、スタイルシートの指定がすべて無効になってしまうことがあるらしい。STYLE="..."を使用せずに、CLASS="..."を用いると改善されることがある。

Copyright (C) 1999 とほほ
http://wakusei.cplaza.ne.jp/twn/wwwcss5.htm