3

inputとselectフィールドがすべて にあるフォームがありますheight:32px。
Firefox はテキストを上に揃えますが、他のすべてのブラウザは中央に揃えます。

テキストを中央揃えにしたいのですが、問題があるようです。
何か提案はありますか？ヒアズ・マイ・フィドル

ここに画像の説明を入力

<select id="month" class="" name="month">
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option selected="" value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
    <option value="12">undefined</option>
</select>
<input type="text" value='some text' />

更新：line-height何もしていないようです

#month, input {height:32px; line-height:32px; vertical-align:middle;}
#month select{line-height:32px;}
4

2 に答える 2

2

実際に、選択ボックスの高さを指定し、さまざまなブラウザーでテキストの配置を観察すると、実装が異なります firfox -- テキストを左上から揃える IE- テキストを下のクロムに揃える - 中央に揃える

解決策の 1 つは、選択ボックスにパディングを追加することです。これも最小の解決策です。これは、FIRFOX を修正するために上部のパディングを行うと、IE でパディングが上部に追加され、テキストがさらに下部に配置されるためです。もう1つの問題は、パディングが選択ドロップダウンボタンにも適用されるパディングと同じくらいです。最善の解決策は、選択ボックスの高さを避け、ボックスのデフォルトの高さを維持することです。詳細については、リンクを参照してください。これにより、選択ボックス内のテキストを垂直方向に揃えたいことが明確 になる場合があります

于 2012-10-27T07:49:09.573 に答える
0

私の解決策は、パディングといくつかのCSSハックを使用することです

#month{padding: 6px 0;}

私はjsfiddleでそれを試しました、それは動作します

于 2012-10-27T03:23:15.083 に答える