Internet Explorer 11中的文本输入填充不能按预期方式工作

Question

在我们的网络应用程序中，我们有输入字段，由css设计。

正如您在屏幕截图中看到的那样，样式在Firefox中有效（从Firebug获取的信息数据），它也适用于Google Chrome。

但是在IE 11中，同一个字段存在填充问题。单词“test”不是垂直居中的。

到目前为止，我尝试过没有成功：

box-sizing: border-box
extra line-height attribute
overflow-visible attribute
vertical-align

非常感谢

编辑：

我包含了一个最小的CSS重置（https://perishablepress.com/a-killer-collection-of-global-css-reset-styles/），但它没有改变。

我还包括ie开发人员工具的截图。您可以看到对输入字段生效的所有样式定义。我认为其他风格定义没有冲突。

编辑：

我再次尝试使用“line-height”属性。它对我不起作用。这个问题：

输入字段必须有34个像素（22个输入字段（行高）+ 5x2边距+ 1x2边框）。这适用于FF和谷歌浏览器。如果我明确地将行高设置为22px，它不会改变IE中的任何内容。如果我将行高设置为其他值（26px），它会将IE更改为更好，但它也会将其他浏览器（26 + 10 + 2）中输入字段的高度更改为38px，因此我无法使用因为输入高度不应超过34像素。

Answer 1

我找到了一个解决方案：

＆＃34; line-height＆＃34;和＆＃34;身高＆＃34;导致期望的结果：

.ni-ui-input {
    line-height: 27px;
    height:      22px;
}

如果我只使用＆＃34; line-height：27px＆＃34;，它可以帮助我修复IE视图，但它会改变其他浏览器中输入字段的高度。

当我添加＆＃34; height＆＃34;属性，其他浏览器（Chrome，Firefox）中输入字段的高度不会改变。

Answer 2

在您的情况下，对于IE，您需要正确设置line-height上的input，以便将文本垂直居中。