Bootstrap 渲染不一致

Question

在使用 Bootstrap 时，Chrome（正确）和 Firefox（错误）之间的渲染不一致。这是我的代码（小提琴here）：

<div class='container'>
    <form class='form-horizontal well span6 offset3'>
        <label class='control-label'>Testy</label>
        <div class='controls'>
            <select></select>
        </div>
    </form>
    <legend>Hello!</legend>
</div>

不一致的原因是什么？如何修复 Firefox 渲染以使其与 Chrome 匹配？

Answer 1

这似乎是 Firefox 和 Chrome 呈现 fieldset 标记的方式，至少在您引用的 Bootstrap 的非响应版本中是这样。为了消除变量，我删除了对 Bootstrap 的引用并链接到 bootstrapcdn.com's version，这似乎解决了问题。

如果不出意外，您总是可以在 fieldset 标记中添加一些 CSS，以确保它在所有现代浏览器中呈现相同。

fieldset { clear: both; }

更新：看起来我没有注意，我更新了这个答案以在legend标签上反映CSS，而不是fieldset。 JSFiddle Here.

legend { clear: both; }

Answer 2

图例标签应放置在表单标签内，并且还应在其周围放置一个字段集标签。

从 Bootstrap 看这个例子：

<form>
<fieldset>
<legend>Legend</legend>
<label>Label name</label>
<input type="text" placeholder="Type something…">
<span class="help-block">Example block-level help text here.</span>
<label class="checkbox">
<input type="checkbox"> Check me out
</label>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form>

对于您的代码，它将是：

<div class='container'>
 <form class='form-horizontal well span6 offset3'>
  <fieldset>
   <label class='control-label'>Testy</label>
   <div class='controls'>
    <select></select>
   </div>
   <legend>Hello!</legend>
  </fieldset>
 </form>
</div>