twitter-bootstrap - float div 旁边的字段集在 chrome/IE 中溢出到右侧，在 FF 中中断到下一行

Question

我正在使用 Bootstrap 3。 我有一个包含 float div 和字段集的包含元素。 float 的 div 宽度为 100%，因此字段集应位于其下方。这在 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 打破或排除什么规则导致呈现不同？这是错误吗？

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

Answer 1

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