1

Safari の入力テキスト ボックスで上部のパディングが無視されるという問題が発生しています。この問題は、Chrome、Firefox、IE では発生しません。問題を表示するために JS Fiddle を作成しました。

http://jsfiddle.net/Xrpwn/5/

このフィドルを Chrome で表示すると、padding-top が正しくレンダリングされていることがわかります。ただし、このフィドルを Safari で表示すると、padding-top は無視され、カーソルはデフォルトで入力の垂直方向の中央に配置されます。

何らかの理由で、デフォルトで Safari は入力のテキストを垂直方向に中央揃えにしているようです。http://opensource.apple.com/source/WebCore/WebCore-514/rendering/RenderTextControlSingleLine.cppでRenderTextControlSingleLine のソースを見ると、次のようになります。

// For text fields, center the inner text vertically
// Don't do this for search fields, since we don't honor height for them
if (!m_innerBlock) {
currentHeight = innerTextRenderer->height();
if (currentHeight < height())
innerTextRenderer->setLocation(innerTextRenderer->x(), (height() - currentHeight) / 2);
}

CSSやjQueryなどを使用してこの動作をオーバーライドする方法を誰かが知っているかどうか知りたいです。

4

1 に答える 1

0

その動作をオーバーライドできるとは思いませんが、入力をキャプチャする JavaScript イベントを使用して、このhttp://jsfiddle.net/Xrpwn/7/ (スロップを許してください) のようなものを使用して同じ効果をシミュレートできます。 :focus/blur を使用して、コンテナ div にアウトラインを追加/削除します。

于 2012-04-06T19:26:54.670 に答える