css - Internet Explorer 11 中的文本输入填充无法按预期工作

Question

在我们的 web 应用程序中，我们有输入字段，它们由 css 设置样式。

如您在屏幕截图中所见，样式适用于 Firefox(信息数据取自 Firebug)，也适用于 Google Chrome。

但在 IE 11 中，同一字段存在此填充问题。 “测试”一词没有垂直居中。

到目前为止，我已经尝试过但没有成功:

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 开发人员工具的屏幕截图。您可以看到所有对输入字段生效的样式定义。我看不到其他风格定义的冲突。

编辑:

我再次尝试使用“行高”属性。它对我不起作用。这个问题:

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

Answer 1

我找到了一个解决方案:

"line-height"和 "height"的组合导致了期望的结果:

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

如果我只使用“line-height: 27px”，它可以帮助我修复 IE View ，但它会改变其他浏览器中输入字段的高度。

当我添加“height”属性时，其他浏览器(Chrome、Firefox)中输入框的高度不会改变。