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>

Bootstrap渲染不一致

2 个答案: