在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 = 50px。或者，如果您想要更多line-height，请减少填充。如果您想保持相同的line-height 和填充，请将高度增加到70px。

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

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

Answer 2

我添加了一个字体大小，似乎可以解决这个问题：

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

有点奇怪......但它似乎是这样做的一种方式。

小提琴：http://jsfiddle.net/audetwebdesign/Y2rd4/

框大小调整

我注意到，与Firefox相比，box-sizing属性在IE10 / 9中计算的高度不同。如果省略该属性，则输入字段的呈现方式更为相似。

Answer 3

填充在IE8中打破它，上帝只知道为什么......

只需删除填充