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

Question

在我们的Web应用程序中,我们有输入字段,由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

我找到了一个解决方案:

"线高"和"高度"的组合可以得到所需的结果:

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

如果我只使用"line-height:27px",它可以帮助我修复IE视图,但它会改变其他浏览器中输入字段的高度.

当我添加"height"属性时,其他浏览器(Chrome,Firefox)中输入字段的高度不会改变.