float divの横のフィールドセットがchrome/IEの右側にオーバーフローし、FFの次の行にブレークします

Question

私はブートストラップ3を使用しています。 浮動小数点divとフィールドセットを含む要素があります。 float divは100％幅ですので、fieldsetはその下に座る必要があります。これはFF（私が開発に使用していた）で動作しますが、chrome/IEではフィールドセットがコンテナからオーバーフローし、floatの右側にあります。

.container{ 
 
    width:300px; 
 
    position:relative; 
 
    border:1px solid red; 
 
} 
 
.float{ 
 
    float:left; 
 
    width:100%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div style="float:left;width:100%;"> 
 
     <a >Select All</a>/<a >Select None</a> 
 
    </div> 
 
    <fieldset>fieldset</fieldset> 
 
</div>

私はフィールドセットにclear:left;を追加することによって、それを修正することができます。

どのブラウザが正しいですか？ FFが間違っているようです。これを違う方法でレンダリングさせるには、FFブレークまたは例外をどのようなルールですか？これはバグですか？

ブートストラップを使用していないときは、テストしたすべてのブラウザで期待どおりにレンダリングされることに注意してください。ブートストラップ内でフィールドセットの代わりにdivを使用すると、ブラウザ間でも同じようにレンダリングされます。

Answer 1

fieldsetのように、デフォルトのスタイリングがブートストラップCSSによってオーバーライドされているようです。 min-width: 0をfieldsetに適用しているため、要素に幅がありません。これがBootstrapに追加された理由はわかりませんが、おそらくあなたの例によると、実際のフォームフィールドであるexpected contentのテキストとは関係があります。あなたの状況を改善するかどうかを確認するために、MDNリンクに従って有効なフォームHTMLを追加してみてください。