CSS のバグ

正式な書式で記述していても、マニュアル通りに表示しないことがあります。特に、IE6 はバグを一杯持っています。Firefox ではちゃんと表示しているのに、IEでは表示がおかしい場合はほとんどバグでしょう。IE でちゃんと表示していても、安心できません。書式違反でたまたま思ったとおりの表示をしている場合もあります。この場合、Firefox での表示がおかしくなっているはずです。
少なくとも、IE と Firefox 2つのブラウザで表示を確認し、異なる表示をした場合はバグだと考え、対応策を検討しましょう。

遭遇したバグ

私が遭遇したバグを紹介します。対応がややこしいバグについては、別のページで対応策を説明します。

レイアウトが崩れる

IE の場合、どう考えても書式はあっているのに、レイアウトが思いとおりにならないことがよくあります。こういう場合、レイアウトが崩れた対象要素に width: 指定すると解決することが多いです。

hover

hover は、IE6 では、a 要素しか有効になりません。Mozilla では、a 要素以外も有効です。

overflow:auto;

IE6では、width 指定しないと、overflow:auto; にしても、レイアウトが崩れることがあります。width 指定しても、横方向がはみ出した場合自動的に縦も横もスクロールバーが出てしまいます。Firefox では、width 指定しなくとも、はみ出した方向のみスクロールバーがでます。

font-family

IE6 では、上記の例は欧文をArial、和文をMS 明朝で表示させようとしていますが、Arialフォントが有効な環境のWinIEでは和文文字がゴシック体で表示されてしまうはずです。従って、この不具合を確実に回避するためには、日本語文字を含むフォントをfont-familyプロパティで始めに指定する必要があります。 従って、例えば以下のようなスタイルを指定した場合は、 font-family: 'Lucida Sans Unicode','Arial Unicode MS',"MS 明朝","平成明朝",Micho, serif;IE

font-size

font-size を設定すると、IE では文字サイズを変更しても、設定したサイズに保たれます。ところが、Firefox などでは、文字サイズを変更すると font-size を設定した文字のサイズも変更されます。よく考えると、こちらの方がユーザフレンドリーです。
どうしても文字サイズを固定したい場合は、文字を画像として貼り付けます。

PR amazon

author

サイト管理人:パワーデジット
管理人への連絡フォーム

スポンサード リンク

このページは 

トップページ > CSS > バグ