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

Nir*_*tel 28 css placeholder mobile-safari vertical-alignment ios5

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

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

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

.txtBox {
    line-height: 3em;
    height: 3em;
}
Run Code Online (Sandbox Code Playgroud)

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

其他人面临这个问题?

Jes*_*sse 36

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

  • 怎么运作......这个背后的逻辑是什么?我很迷惑. (5认同)
  • 这削减了Chrome和IE10的占位符.Downvoted! (3认同)

Mar*_*cel 36

对我来说,只有一种解决方案在我测试的所有浏览器中看起来都非常完美(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;```没有效果. (4认同)
  • 这是正确的答案.我在Chrome中遇到了'line-height:100%`和`line-height:1;`这个问题,这是唯一对我有用的答案. (4认同)

小智 8

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

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>
Run Code Online (Sandbox Code Playgroud)