HTML наборы полей/границы div в Internet Explorer

Я делаю меню опций, и я хотел бы иметь возможность включать/отключать часть меню с помощью флажка. Итак, я попробовал здесь 3 вещи, которые отлично работают и хорошо выглядят в Chrome/Firefox, но я не могу понять, как заставить их хорошо выглядеть и в IE.

1. Сначала я попытался использовать набор полей и сместить легенду и флажок, которые были внутри него, см. здесь: fieldset
2. Затем я попытался использовать аналогичный подход с помощью div и label, см. здесь: div/label
3. Наконец, я попытался переместить метку/флажок за пределы div, но опять же это выглядит плохо в IE, см. здесь: div/метка вне div

Я не очень хорошо разбираюсь в CSS для разных браузеров, поэтому извините, если это действительно простая обычная вещь, но я не смог найти ничего об этом из того, что я мог подумать, в Google.

У меня вся логика работает нормально, и я только пытаюсь правильно отобразить html/css здесь, поэтому нет необходимости публиковать ответы с включением/отключением javascript.

Это HTML для попытки 1:

<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;
}