占位符文本在Safari中不是垂直居中的

Question

您是否知道如何将占位符属性设置为在safari中垂直居中？虽然当您开始输入时,文本完全居中.

Answer 1

-Safari解决方案 -

尽管使用了很长时间,我仍然坚持这个问题

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

事实证明,在直接input元素中使用input::webkit-input-placeholder行高会破坏我的行高.

扩展解决方案

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

Answer 2

最简单的方法是使用line-height和heightCSS属性.只需为文本输入a赋予line-height与其相同的值height.

顺便说一下,您的实时网站在Chrome 16中看起来不错.

Answer 3

对我来说,最好的解决方案是使用line-height:normal和hack for IE 8.

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px\0/; /* for IE 8 */
}

Answer 4

也有这个错误.在ems中设置行高为我解决了这个问题.它在Chrome,Safari(桌面和iOS)和Firefox中看起来都一样.我添加了一个\ 9技巧,以获得IE中的垂直居中.这是我的CSS

height: 36px;       
line-height: 1.2em;
line-height: 26px\9; /*for IE */

Answer 5

对我来说很好:

<input type="text" name="first_name" placeholder="Search" style="height: 50px;">

尝试改变这个:

#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}