Safari 输入文本忽略顶部填充

Question

我遇到一个问题，即输入文本框中的 Safari 中的顶部填充被忽略。 Chrome、Firefox 和 IE 均未出现此问题。 我创建了一个 JS Fiddle 来显示问题：

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

如果您在 Chrome 中查看此小提琴，您可以看到 padding-top 已正确呈现。 但是，如果您在 Safari 中查看此小提琴，则 padding-top 将被忽略，并且 cursor 默认位于输入的垂直中心。

出于某种原因，默认情况下 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/ （请原谅斜坡）和捕获输入的 javascript 事件来模拟相同的效果:focus/blur 添加/删除容器 div 的轮廓。