html - ブートストラップ 3 では、入力検索バーが IE 9 以下の列の全幅に及ばない

Question

そのため、Bootstrap 3 Web サイトに検索フォームがあります。

<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 では、フォームは約 4 分の 1 しか広がりません。

なぜこれが起こっているのでしょうか？

Answer 1

この問題の原因は、IE がdisplay: table;css プロパティに対して異なる動作をすることです。

表示:IE 9/8 の表

の CSS クラスが表示input-groupされます。<fieldset>の css プロパティがありますdisplay: table;。

これを削除すると、問題は解決しました。

これを試して

また

CSSクラスで使用する<div></div>代わりに使用できます：<fieldset></fieldset>form-group

<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要素で試す