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

Posted 2023-03-05

【中文标题】iOS 5.0 Safari 不在文本框中垂直居中占位符

【英文标题】：iOS 5.0 Safari not vertically centering placeholder in text box

【发布时间】：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>

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

【问题讨论】：

***.com/questions/4919680/… 的副本

【参考方案1】：

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

line-height: normal;

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

http://jsfiddle.net/5Vc3z/

比较：

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

【讨论】：

我同意这一点。 line-height: normal; 是唯一在 chrome 中为占位符工作的解决方案。 line-height: 1; 无效。

这是正确答案。我在 Chrome 中遇到了 line-height: 100% 和 line-height: 1; 的问题，这是唯一对我有用的答案。

是的，这应该是正确的答案。我也试过line-height 和px，但只有这个答案有效

这应该是选择的答案

【参考方案2】：

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

【讨论】：

这是怎么回事……这背后的逻辑是什么？我很困惑。

这会减少 Chrome 和 IE10 的占位符。投反对票！

这并不适用。请参阅下面的 andychukse 的答案以获得有效的解决方案。

查看马塞尔的答案以获得正确的解决方案。不要使用 andychukse 的答案，因为这也有问题。

【参考方案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 不支持很多样式。

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

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

【讨论】：

更新了我的问题...实际上它的占位符文本没有出现居中。

【参考方案5】：

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

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

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

解决方案扩展：

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