0

オプションメニューを作っているのですが、メニューの一部をチェックボックスで有効/無効にしたいです。だから私はここで3つのことを試しましたが、Chrome/Firefoxでは問題なく動作し、問題なく表示されますが、IEでも問題なく表示する方法がわかりません。

  1. 最初にフィールドセットを使用して、その中にある凡例とチェックボックスをオフセットしてみました。ここを参照してください:フィールドセット
  2. 次に、同様のアプローチを行う div とラベルを使用してみました。こちらを参照してください: div/label
  3. 最後に、ラベル/チェックボックスをdivの外に移動しようとしましたが、IEでは見栄えが悪くなります。ここを参照してください: div/label outside div

私はさまざまなブラウザーの CSS があまり得意ではないので、これが本当に単純な一般的なことである場合は申し訳ありませんが、Google に考えられることからそれについて何も見つけることができませんでした。

私はすべてのロジックが正常に機能しており、ここでhtml/cssを正しく表示しようとしているだけなので、javascriptの有効化/無効化で回答を投稿する必要はありません。

これは試行 1 の HTML です。

<fieldset class="groupBox">
<legend>Load template automatically</legend>
<input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
<div id="templateDiv">
    <label>Root Path:</label>
    <input type="text" id="templateLocation" readonly="true"/>
    <button type="button">...</button>
</div>
</fieldset>

および関連する CSS:

.fieldsetCheckbox{
  width: 16px;
  margin-top: -31px;
  margin-left: -14px;
  float: left;
}

.groupBox{
  padding: 15px;
  border: 2px solid #ccc;
  margin: 0px 0px 5px 0px;
}
4

1 に答える 1

2

次のように、入力を凡例の中に入れてみませんか: http://jsfiddle.net/dv866/6/

<legend>
    <input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
    Load template automatically
</legend>
于 2013-08-20T09:35:11.653 に答える