スタイルシートでページを初期化するときに*（ワイルドカード）を使って全てのタグのmerginやpaddingを0に設定する場合があります。その場合、selectタグでメニューを定義すると文字の最後がFirefoxでは隠れてしまう場合があります。半角英数字だと隠れてしまうようです。下記が例です。
<html>
<head>
<title>テストページ</title>
<style TYPE="text/css">
<!--
* {
padding: 0;
margin: 0;
}
-->
</style>
</head>
<body>
<select name="TEST">
<option value="10000">10,000</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
</select>
</body>
</html>
上の様なページを作った場合、Internet Explorer（以降IE）では下記の様に表示されますが
Internet explorerでの表示
Firefoxだと下の様に表示が一部欠けてしまいます。幾つもSELECTタグを使っているとかなり見栄えが悪くなります。
Firefoxでの表示
いったい何処のmerginが0になったせいでこうなってしまうのか判らないので、かなり悩んだのですが、色々試してみた結果わかりました。
optionタグのmergin-rightが0になってしまったせいの様です。そういうわけで下記のスタイルシートをの記述を追加して上手く表示されるようになりました。
option{
margin-right:10px;
}
Firefoxでの表示（修正後)
修正後のソース
<html>
<head>
<title>
テストページ
</title><style TYPE="text/css">
<!--
* {
padding: 0;
margin: 0;
}option{
margin-right:10px;
}-->
</style>
</head>
<body>
<select name="TEST">
<option value="10000">10,000</option>
<option value="20000">20,000</option>
<option value="30000">30,000</option>
<option value="40000">40,000</option>
</select>
</body>
</html>
コメントする