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

Posted by kumacchi on 2008年5月5日 , No comment

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