CSS iOS 5.0 Safari 未在文本框中垂直居中占位符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8558603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS 5.0 Safari not vertically centering placeholder in text box
提问by Nirmal Patel
I want to vertically center the text entered in input text boxes on the page.
我想将在页面上的输入文本框中输入的文本垂直居中。
Typical way to achieve this is to set the line-height and height equal. This works on pre iOS 5.0 Safari.
实现这一点的典型方法是将 line-height 和 height 设置为相等。这适用于 iOS 5.0 之前的 Safari。
However; on iOS 5, Safari displays the typed text vertically centered... But the placeholder text and the cursor appear top aligned.
然而; 在 iOS 5 上，Safari 显示输入的文本垂直居中......但占位符文本和光标显示为顶部对齐。
.txtBox {
line-height: 3em;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
<input type="text" class="txtBox" placeholder="Name"></input>
Anyone else facing this issue?
还有其他人面临这个问题吗？
回答by Jesse
Setting line-height: 1;seems to fix this.
设置line-height: 1;似乎解决了这个问题。
回答by Marcel
For me there is only one solution that appears close to perfect in all browsers I tested (Chrome, FF, Safari (+iOS), IE10):
对我来说，在我测试过的所有浏览器（Chrome、FF、Safari (+iOS)、IE10）中，只有一种解决方案看起来接近完美：
line-height: normal;
line-height: normal;
Solutions like line-height: 100%and line-height: 1;seem to be aligned towards the top of the input, especially in Chrome.
解决方案，如line-height: 100%与line-height: 1;似乎对输入的顶部，尤其是在Chrome对齐。
Comparison:
比较：
回答by andychukse
You should use percentage for the line-height.
您应该使用百分比作为行高。
.txtBox {
line-height: 100%;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
回答by My Head Hurts
Assuming you are just trying to make the input field appear larger then you could use padding:
假设您只是想让输入字段显得更大，那么您可以使用padding：
.txtBox {
font-size: 1em;
padding: 1em auto;
}
.txtBox {
font-size: 1em;
padding: 1em auto;
}
Also, your input field should be:
此外，您的输入字段应该是：
<input type="text" class="txtBox" placeholder="Name" />
Edit
编辑
Sorry, took a little while. It appears that placeholdercan be styled individually and / or inherit styles from the parent. Unfortunately there are quite a lot of styles that are not supported by Safari at this time.
抱歉，花了一点时间。似乎placeholder可以单独设置样式和/或从父项继承样式。不幸的是，目前有相当多的样式不受 Safari 支持。
The following blog has details about the styling techniques and which are / are not supported within certain browsers:
以下博客详细介绍了样式技术以及某些浏览器不支持/不支持的样式技术：
回答by Ariella
I got stuck on this issue for a long time despite using
尽管使用了这个问题，但我还是卡在了这个问题上很长时间
input::-webkit-input-placeholder {
line-height:normal!important;
}
input::-webkit-input-placeholder {
line-height:normal!important;
}
It turns out the having a line-height in the input element by itself was breaking my input::webkit-input-placeholder line-height.
事实证明，输入元素中的行高本身破坏了我的 input::webkit-input-placeholder 行高。
Solution extended:
解决方案扩展：
I removed the line-height in my input style and it fixed my issue.
我删除了输入样式中的行高，它解决了我的问题。
