1

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

<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 匹配？

4

2 回答 2

1

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

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

字段集 { 清除：两者；}

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

legend { clear: both; }

于 2013-04-16T16:57:02.373 回答
0

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

请参阅 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>

于 2013-03-25T11:35:24.417 回答