iOS 5.0 Safari 不在文本框中垂直居中占位符答案

【问题标题】：iOS 5.0 Safari not vertically centering placeholder in text boxiOS 5.0 Safari 不在文本框中垂直居中占位符
【发布时间】：2012-01-23 10:08:03
【问题描述】：

我想将页面上输入文本框中输入的文本垂直居中。

实现此目的的典型方法是将行高和高度设置为相等。这适用于 iOS 5.0 之前的 Safari。

但是；在 iOS 5 上，Safari 将键入的文本垂直居中显示...但占位符文本和光标显示为顶部对齐。

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

还有其他人面临这个问题吗？

【问题讨论】：

【解决方案1】：

对我来说，在我测试的所有浏览器（Chrome、FF、Safari (+iOS)、IE10）中，只有一种解决方案看起来接近完美：

line-height: normal;

line-height: 100% 和 line-height: 1; 之类的解决方案似乎与输入的顶部对齐，尤其是在 Chrome 中。

比较：

【讨论】：

【解决方案2】：

设置line-height: 1; 似乎可以解决这个问题。

【讨论】：

【解决方案3】：

您应该使用百分比作为行高。

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>

【讨论】：

完美运行。您还可以使用任何百分比值，而不仅仅是 100%。这应该是公认的答案。
这应该是公认的答案。例如，如果我们需要将文本垂直居中（通过将 line-height 设置为 height ），这会使该场景正确呈现。
line-height: normal; 是更好的方法，如 Marcel 的回答所示。正如他在回答中提到的那样，line-height: 100% 和 line-height: 1; 之类的解决方案似乎与输入的顶部对齐，尤其是在 Chrome 中。
line-height: 100% 在新旧浏览器中都非常适合我

【解决方案4】：

~~假设您只是想让输入字段看起来更大，那么您可以使用padding:~~

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

此外，您的输入字段应为：

<input type="text" class="txtBox" placeholder="Name" />

抱歉，耽误了一点时间。 placeholder 似乎可以单独设置样式和/或从父级继承样式。不幸的是，目前 Safari 不支持很多样式。

以下博客详细介绍了样式技术以及某些浏览器支持/不支持的技术：

【讨论】：

【解决方案5】：

尽管使用了，但我在这个问题上卡了很长时间

input::-webkit-input-placeholder { line-height:normal!important; }

事实证明，输入元素中的行高本身就破坏了我的 input::webkit-input-placeholder 行高。

解决方案扩展：

我删除了输入样式中的行高，它解决了我的问题。

【讨论】：