html - bootstrap 3 radio button broke IE

Question

<form method="post" role="form" class="form-horizontal">
<div class="form-group">
    <div class="radio">
        <label class="control-label col-sm-2">
            <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="startDate">
        </div>
        <div style="float:left">:</div>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="endDate">
        </div>
    </div>
</div>

My radio button display normal with chrome, edge, ff, but in old IE its broken - button and label not close together.

I try to use jsfiddle but radio not display when I use IE. plz help me.

https://jsfiddle.net/pLvop1ws/2/

Answer 1

Don't use Check box and Radio button in form-group class. Here i wrote it again. Please use this and tell me again your issue..

<form method="post" role="form" class="form-horizontal">
    <div class="radio">
        <label class="control-label col-sm-2">
            <input type="radio" name="selectDate" id="date" style="margin-right: 0" checked>Date</label>

        <div class="form-group">
          <div class="col-sm-3">
            <input type="text" class="form-control" id="startDate">
          </div>
          <div style="float:left">:</div>
          <div class="col-sm-3">
            <input type="text" class="form-control" id="endDate">
          </div>
      </div>
    </div>
</form>