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

我不相信您将能够覆盖该行为，但您可以使用类似http://jsfiddle.net/Xrpwn/7/（请原谅 slop）和捕获输入的 javascript 事件来模拟相同的效果:focus/blur 添加/删除容器 div 的轮廓。

于 2012-04-06T19:26:54.670 回答