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>

不整合の原因は何ですか？Chromeのレンダリングと一致するようにFirefoxのレンダリングを修正するにはどうすればよいですか？

4

2 に答える 2

1

FirefoxとChromeがfieldsetタグをレンダリングする方法のようですが、少なくとも参照しているBootstrapの応答しないバージョンではそうです。変数を削除するために、Bootstrapへの参照を削除し、bootstrapcdn.comのバージョンにリンクしました。これにより、問題が修正されたようです。

他に何もない場合は、いつでもfieldsetタグにCSSを少し追加して、最新のすべてのブラウザーで同じようにレンダリングされるようにすることができます。

フィールドセット{クリア：両方; }

更新：私は注意を払っていなかったようです。この回答を更新して、 。legendではなく、タグにCSSを反映させましたfieldset。 JSFiddleHere。

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 に答える