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

Question

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

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

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

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

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

其他人遇到此问题？

Answer 1

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

Answer 2

对我而言，我测试的所有浏览器中只有一种解决方案似乎接近完美（Chrome，FF，Safari（+ iOS），IE10）：

line-height: normal;

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

http://jsfiddle.net/5Vc3z/

比较：

http://jsfiddle.net/5Vc3z/1/

Answer 3

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

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

Answer 4

假设您只是想让输入字段显得更大，那么您可以使用padding：

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

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

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

修改

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

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

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

Answer 5

尽管使用了

，我仍然坚持这个问题很长一段时间

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

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

扩展解决方案：

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