4

次の入力要素があります (この例では不要な属性を意図的に省略しました)。

<input type="text" style="display: block; height: 40px; font-size: 14px; line-height: 40px"/>

Chrome と Internet Explorer (おそらく Opera も) では、入力内のテキストは垂直方向に中央揃えになります。ただし、Firefox はこの宣言を無視しているようです。display: inline-block;代わりに設定したり、使用したりしvertical-align: middle;ても、Firefox では効果がありません。

また、上下のパディングを13pxに設定し、高さを に設定しようとしましたが14px、これは (font-size と組み合わせると) 要素が40px高くなります。これは期待どおりに機能します。ただし、末尾の文字 ( g、q、jなど) は下部で切り取られます。

入力ボックス内のテキストを固定の高さで垂直方向に配置するためのクロスブラウザー ソリューションを探しています。入力要素には独自のホバー スタイルとフォーカス スタイルがあるため、要素自体を縦方向に配置してセンタリングを偽装すること40pxは実際にはオプションではありません。

乾杯

4

1 に答える 1

5

また、上下のパディングを 13px に、高さを 14px に設定してみました。これを (font-size と組み合わせると) 要素の高さが 40px になります。これは期待どおりに機能します。ただし、末尾の文字 (g、q、j など) は下部で切り取られます。

次のように、上部のパディングのみを 13px (下部のパディングではなく) に設定し、高さを残りのスペースに設定するのはどうですか?

<input type="text" style="display: block; height: 27px; padding-top: 13px; font-size: 14px">

Firefox と Chrome の両方で期待どおりに動作します。現時点では IE にアクセスできませんが、IE でも動作すると確信しています。

于 2010-02-08T14:18:32.433 に答える