Question

所以我在Bootstrap 3网站上有一个搜索表单。

<div class="col-sm-12 col-md-12">
<form  action="/" method="get">
    <fieldset class="input-group">
        <input type="text" name="s" id="searchbar" class="form-control input-lg" value="Search..." />
    </fieldset>
</form>
</div>

在Safari，Chrome，IE10和Firefox中 - 表格延伸了col-12的整个宽度，但是，在IE9和IE8中，表格仅占用了四分之一左右。

知道为什么会这样吗？

Answer 1

此问题的原因是IE为display: table; css属性设置了不同的行为。

Display:table in IE 9/8

您可以看到input-group的CSS类<fieldset>，其中有一个css属性：display: table;。

如果删除此功能，则问题已解决。

Try This

OR

您可以使用<div></div>代替<fieldset></fieldset>使用form-group CSS类：

<div class="col-sm-12 col-md-12">
<form  action="/" method="get">
    <div class="form-group">
        <input type="text" name="s" id="searchbar" class="form-control input-lg" value="Search..." />
    </div>
</form>
</div>

Try with div element

在bootstrap 3中，输入搜索栏不会跨越IE 9及更低版本中列的整个宽度

1 个答案: