IE浏览器下bootStrap form-control input输入框不显示兼容性问题
问题背景
采用了如下代码. 主要时bootstrap 搜索框。 再IE11下表现出 input 明明 value
有值,但是显示不出来的问题。
排查发现form-control
样式去后功能正常,但是样式需要重写。 最后解决css如下。
<div class="input-group">
<input type="text" id="query" name="t11" value="@Model.Query"
class="form-control" style="color:black;" />
<div class="input-group-btn">
<button class="btn btn-warning" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
解决方案
增加css hack如下:
.input-group input {
width: 100%;
height: 42px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
}
在未知中徜徉,
求心之荡漾。