html - 在引导程序 3 中，输入搜索栏不跨越 IE 9 及以下版本中的列的全宽

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 属性做出了不同的行为。

显示：IE 9/8 中的表格

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

如果你删除它，你的问题就解决了。

尝试这个

或者

您可以使用<div></div>而不是<fieldset></fieldset>与form-groupCSS 类一起使用：

<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> 

尝试使用 div 元素