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

时间:2016-06-21 16:07:27

标签: css twitter-bootstrap bootstrap-4

当我使用带有bootstrap v4的输入组时,我遇到了IE的问题,在chrome中效果很好。我使用 IE 11

这是我的傻瓜

input group bootstrap v4

chrome look:

enter image description here

IE看:

enter image description here

我发现form-control有填充:.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中搞乱了。

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

由于

1 个答案:

答案 0 :(得分:0)

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

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

FYR: http://jsfiddle.net/iyyappan13391/26ZM4/257/