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

Question

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

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

这里发生了什么？如何让文本输入“正确”显示，文本在 IE 中垂直居中？

谢谢！

score 14 · Accepted Answer

您需要协调padding和line-height。有了box-sizing: border-box，他们本质上是在为同一个房地产而战。

换句话说，您是在说“将 50px 的行高放入 50px 的总垂直空间中，但也要将其填充 20px”。

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

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

score 2 · Accepted Answer

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

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

有点奇怪......但这似乎是一种方法。

盒子尺寸

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

score -2 · Accepted Answer

-2

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

只需删除填充

于 2013-05-25T02:20:26.410 回答

3 回答 3