Internet Explorer中的HTML fieldsets / div border

Question

我正在制作一個選項菜單，我希望能夠通過復選框啟用/禁用部分菜單。 所以我在這里嘗試了3件工作正常並且在Chrome / Firefox中看起來不錯，但是我無法弄清楚如何讓它在IE中看起來也不錯。

1. 我首先嘗試使用fieldset並偏移其中的圖例和復選框，請參閱此處： fieldset
2. 然后我嘗試使用div和標簽做類似的方法，請看這里： div / label
3. 最后我嘗試移動div之外的標簽/復選框，但在IE中它看起來很糟糕，請看這里： div /標簽在div之外

我對不同瀏覽器的CSS不是很擅長，所以如果這是一個非常簡單的常見問題，我很抱歉，但我無法從谷歌的想法中找到任何關於它的東西。

我有所有的邏輯工作正常，我只是想在這里正確顯示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;
}

Answer 1

如何將輸入放在圖例中，如下所示： http ： //jsfiddle.net/dv866/6/

<legend>
    <input id="LoadTemplateCheckBox" type="checkbox" class="fieldsetCheckbox" />
    Load template automatically
</legend>