Internet Explorer 中的 HTML 字段集/div 边框

Question

我正在制作一个选项菜单，我希望能够使用复选框启用/禁用部分菜单。所以我在这里尝试了 3 件事，它们在 Chrome/Firefox 中运行良好并且看起来还不错，但我不知道如何让它在 IE 中也看起来不错。

1. 我首先尝试使用字段集并偏移其中的图例和复选框，请参见此处：fieldset
2. 然后我尝试使用 div 和 label 执行类似的方法，请参见此处：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;
}

Answer 1

把输入放在图例中怎么样，像这样：http://jsfiddle.net/dv866/6/

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