各ブラウザのSelectタグのプロパティと各ブラウザのサポートが異なることがわかっています。これにより、選択ボックスが各ブラウザで異なる方法で表示されます。以下に、メインの外観CSS属性のサポートを通じて、完全に互換性のある選択を作成します。
変数を制御する方法を使用してデモを書き込み、各ブラウザで3つの状況をテストしました：height.100.padding.0、height.no.padding.100、no.height.no.padding。結果は次のとおりです。リンク写真、各ブラウザのデモの外観。
次の研究属性を導き出すことができます。
IE6 | IE7 | IE8 | IE9 | ff | ch | SF | op | |
デフォルトの高さ | 22px | 22px | 19px | 20px | 19px | 19px | ||
身長 | f | t | t | t | t | t | f | t |
パディング | f | f | t | t | t | t | f | t |
ラインハイト | f | f | f | f | f | f | t | f |
テキストが垂直に集中しています | t | t | t | f | f | t | t | t |
上記の研究結果属性の概要を通じて、IE6はいつでも22pxに固定され、変更されていないように設定されていることがわかりますが、Safariを除く他のブラウザは高さ属性をサポートしているため、高さ：22pxを設定します。それでは、Safariブラウザを修正しましょう。 Safariのみがラインハイイト属性をサポートしているため、ラインハイトを使用して高さを22pxに修正できることがわかりました。フォントサイズが12pxの場合、ラインハイト：22pxが設定されています。最終的に、FFとIE9のテキストは中央にあり、パディング：2px 0が設定されています。 FFとIE9が中央にあることがわかりましたが、各ブラウザの選択の高さは増加していません。それで、ここには少し疑いがあります。高さの設定の下で、少数の数のパディングは全体の高さを増加させませんか？
以下は、完全に互換性のあるコードの例です。
コードをコピーします