在IE9 + IE10中输入文本的垂直居中文本

Question

例如:http://jsfiddle.net/D7v2Y/

在firefox/webkit中,这非常有用.文本居中.不在IE10或IE9中

input {
    display: block;
    box-sizing: border-box;
    line-height: 50px;
    height: 50px;
    padding: 10px;
}

这里有什么问题？我如何让文本输入"正确"显示文本在IE中垂直居中？

谢谢!

Answer 1

你需要调和padding和line-height.有了box-sizing: border-box,他们基本上是为同一个房地产而战.

换句话说,你说的是"将50px的线高调整为50px的总垂直空间,但也将它填充20px".

一个简单的解决方案是降低line-height使得padding*2 + line-height= 50像素.或者,如果您想要更多line-height,请减少填充.如果要保持相同line-height 和填充,请将高度增加到70px.

示例:http://jsfiddle.net/D7v2Y/11/

input {
    display: block;
    box-sizing: border-box;
    line-height: 30px;
    height: 50px;
    padding: 10px;
}