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

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

我首先尝试使用字段集并偏移其中的图例和复选框，请参见此处：

然后，我尝试使用div和label执行类似的方法，请参见此处：

最后，我尝试将标签/复选框移到div之外，但在IE中它看起来很糟糕，请参见此处：

我不太擅长不同浏览器的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文件中，所以不要认为有条件的注释是我想要的…非常感谢！我甚至不知道legend里面可以有其他元素。每个有结束标记的元素里面都可以有其他元素，但是其中一些元素在不同的浏览器中是不同的。

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

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

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