Safari输入文本忽略填充顶部

Question

我遇到的问题是在输入文本框中Safari中忽略了填充顶部。在Chrome，Firefox和IE中都不会出现此问题。我创建了一个JS Fiddle来显示问题：

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

如果您在Chrome中查看此小提琴，则可以看到填充顶部已正确呈现。但是，如果您在Safari中查看此小提琴，则会忽略填充顶部，并且默认情况下光标位于输入的垂直中心。

出于某种原因，默认情况下，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或类似的东西来覆盖此行为。

Answer 1

我不相信你能够覆盖这种行为，但是你可以使用像http://jsfiddle.net/Xrpwn/7/这样的东西来模拟相同的效果（请原谅slop）以及捕获输入的javascript事件：focus / blur添加/删除轮廓到容器div。