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

【问题标题】：bootstrap v4 input group button and textbox alignment issue in IEIE中的bootstrap v4输入组按钮和文本框对齐问题
【发布时间】：2016-10-23 07:10:13
【问题描述】：

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

这是我的朋友

input group bootstrap v4

镀铬外观：

IE 外观：

我发现表单控件有填充：.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 中会混乱。

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

谢谢

【问题讨论】：

我没有答案，但也许令人欣慰的是（或没有）Bootstrap 自己页面上的输入组也在 IE 中分解；）v4-alpha.getbootstrap.com/components/input-group
您可能需要使用 css 修复即使引导演示不适用于按钮插件，v4-alpha.getbootstrap.com/components/input-group/#button-addons
那么媒体查询是一个不错的选择吗？还是我应该尝试找到适用于所有情况的不同 css。

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

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

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

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

【讨论】：