浮动div旁边的字段集在chrome / IE中向右溢出，中断FF

Question

我正在使用Bootstrap 3。 我有一个包含浮动div和字段集的包含元素。浮动div的宽度为100％，因此fieldset应位于其下方。这适用于FF（我用它来开发）但在chrome / IE中，fieldset溢出容器并位于float的右侧。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我可以通过向字段集添加clear:left;来解决此问题。

哪种浏览器正确？似乎FF是错误的。什么规则是FF破坏或除外导致这种渲染方式不同？这是一个错误吗？

注意到不使用bootstrap时，它会在我测试的所有浏览器中按预期呈现。在bootstrap中，如果我使用div而不是fieldset，它也会在浏览器中呈现相同的内容。

Answer 1

看起来它是fieldset默认样式被Bootstrap CSS覆盖。它将min-width: 0应用于fieldset，导致元素没有宽度。不知道为什么这被添加到Bootstrap中，但它可能与它的expected content是实际的表单字段有关，而不是根据你的例子只是文本。尝试根据MDN链接添加一些有效的表单HTML，看看是否可以改善您的情况。