スタイルシートで*(ワイルドカード)で全てにpadding:0;margin:0;を指定するとFirefoxでプルダウンメニューの表示が欠けてしまう場合の対処

スタイルシートでページを初期化するときに*(ワイルドカード)を使って全てのタグの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での表示
Internet explorerでの表示

Firefoxだと下の様に表示が一部欠けてしまいます。幾つもSELECTタグを使っているとかなり見栄えが悪くなります。

Firefoxでの表示
Firefoxでの表示

いったい何処のmerginが0になったせいでこうなってしまうのか判らないので、かなり悩んだのですが、色々試してみた結果わかりました。

optionタグのmergin-rightが0になってしまったせいの様です。そういうわけで下記のスタイルシートをの記述を追加して上手く表示されるようになりました。

option{
 margin-right:10px;
}

Firefoxでの表示(修正後)
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>

タグ : ,