SELECT要素の垂直位置

質問

SELECTをheight指定で高さを広げています。

<select style='height:30px;'>
<option value='1'>要素1</option>
<option value='2'>要素2</option>
<option value='3'>要素3</option>
<option value='4'>要素4</option>
</select>

IE8だと要素文字列がプルダウン表示枠の下に寄ってしまいます。
FireFoxやIE9以上だと垂直方向の中央に寄ります。

できれば、これをIE8でも垂直方向の中央に寄せたいのですが、
方法がわかりません。宜しくお願いします。

IE8だと
┌─────────────
│　　　　　　　　　　　　　　　　　　　
│　　　　　　　　　　　　　　　　　　　▼
│要素1　　　　　　　　　　　　　　　
└─────────────

↓ IE8でもこうしたい

FireFoxやIE9以上だと
┌─────────────
│　　　　　　　　　　　　　　　　　　　
│要素1　　　　　　　　　　　　　　　▼
│　　　　　　　　　　　　　　　　　　　
└─────────────

回答No.1

ORUKA1951 · ベストアンサー

formのユーザーインターフェースに関わる物は基本的にスタイルシートで変更はできません。出来たとしても弄るべきではありません。
　サイトごとに、ユーザーインターフェースが異なると困るからです。

　ただ、標準モードだと下記の通り・・
p.form{line-height:60px;}
p.form select,p.form select option{display:block;height:60px;}

<form action="./">
　<p>本文項記事</p>
　<p class="form">
　　<select name="test">
　　　<option value='1'>要素1</option>
　　　<option value='2'>要素2</option>
　　　<option value='3'>要素3</option>
　　　<option value='4'>要素4</option>
　　</select>
　</p>
</form>

★ＵＩに関わる部分---例えばカソールとか---は弄らないは原則です。
　すべてのユーザーがfirefoxやIE,Chrome使っているわけじゃない。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

お礼

確かに、form要素をcssで無理やり変更するべきではないのでしょう。
今回はお客様からの希望でしたので、無理やり変えたかった次第です。
ご回答ありがとうございました。とりあえず、お客様へは納得してもらえ
そうです。

回答No.2

ORUKA1951

ちなみに表示結果ですが・・