HTML-поля/границы div в Internet Explorer

Question

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

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

Я не очень хорош в CSS для разных браузеров, так что я извиняюсь, если это действительно простая общая вещь, но я c ouldn't ничего не узнал из того, что я мог думать в 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; 
} 

Answer 1

Как о вводе входа в легенду, как это: http://jsfiddle.net/dv866/6/

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