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

这里的例子：http://jsfiddle.net/D7v2Y/ http://jsfiddle.net/D7v2Y/

在 firefox/webkit 中这效果很好。文本居中。不适用于 IE10 或 IE9

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

这是怎么回事？如何让文本输入在 IE 中“正确”显示且文本垂直居中？

谢谢你！

您需要协调padding and line-height. With box-sizing: border-box，他们本质上是在争夺同一块地产。

换句话说，您的意思是“将 50 像素的行高放入 50 像素的总垂直空间中，但还要将其填充 20 像素”。

一个简单的解决方案是减少line-height以便padding * 2 + line-height= 50 像素。或者，如果你想要更多line-height，减少填充。如果你想保持一样line-height and填充，将高度增加到 70px。

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

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