在IE10底部输入文字

Question

为什么我的输入文本会在IE10的输入底部呈现？ FF和Chrome将它呈现在中间，因为它应该是。

http://jsfiddle.net/PXN2e/2/

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 6px 10px;
    width: 150px;
}
button, input, select, textarea {
    box-sizing: border-box;
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    max-width: 100%;
    vertical-align: baseline;
}

请不要说唯一的解决办法就是删除box-sizing: border-box;，我实际上需要这个。除去它，无论如何输入框都变得太大了。

Answer 1

从line-height

中删除input.form-text

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    /*line-height: 30px;*/ /* Removed */
    padding: 6px 10px;
    width: 150px;
}

Demo

Answer 2

如果您要提供line-height，请删除顶部/底部填充：

演示：http://jsfiddle.net/abhitalks/PXN2e/7/

CSS ：

input.form-text {
    color: #999999;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    padding: 0px 10px; /* <-- Remove top/bottom padding */
    width: 150px;
}

如果指定，

line-height将垂直对齐height。因此，添加额外的填充可能会导致此类问题。此外，您不必仔细评估顶部/底部填充物以垂直对齐。

Answer 3

您可以保留行高，但只需与您添加的填充符一致：

30px - 6px -6px = 18px

line-height: 18px