css - IE 中的 bootstrap v4 输入组按钮和文本框对齐问题

Question

当我将输入组与 bootstrap v4 一起使用时，IE 出现问题，在 chrome 中运行良好。我正在使用 IE 11

这是我的 friend

input group bootstrap v4

Chrome 外观:

IE 外观:

我发现 form-control 有 padding: .375rem .75rem;

.form-control {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: .25rem;}

如果我增加底部填充，它在 IE 中调整得很好，但在 chrome 中会乱七八糟。

所以我正在寻找适用于任何地方的解决方案。

谢谢

Answer 1

我们可能会使用 Internet Explorer 媒体查询。因为根据浏览器，一些值已经改变。

/***for IE browser***/
@media screen and (min-width:0\0) {
    .form-control {
        padding: 9px 10px;
    }
}

财政年度: http://jsfiddle.net/iyyappan13391/26ZM4/257/