Using Bootstrap 3 radio buttons don't show well on IE11
<p>In IE 10 and 11 the radio buttons overlap the text next to the button. </p>

<p>The html-code is as follows:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="radio"&gt;
    &lt;label class="radio col-xs-offset-3 col-xs-10" for="member_no_photo-0"&gt;
        &lt;input type="radio" name="member_no_photo" id="member_no_photo-0" value="0" class="form-control"&gt;&amp;nbsp; Ja
    &lt;/label&gt;
    &lt;label class="radio col-xs-offset-3 col-xs-10" for="member_no_photo-1"&gt;
        &lt;input type="radio" name="member_no_photo" id="member_no_photo-1" value="1" checked="checked" class="form-control"&gt;&amp;nbsp; Nee
    &lt;/label&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>In other browsers than IE the radio buttons show correctly like:
<a href="http://www.miocrates.com/images/Schermafbeelding%202016-03-22%20om%2011.07.08.png" rel="nofollow">http://www.miocrates.com/images/Schermafbeelding%202016-03-22%20om%2011.07.08.png</a></p>

<p>On IE 10 and 11 they show like this (I've made the radio-button background transparant to even see the label text.)</p>

<p><a href="http://www.miocrates.com/images/Schermafbeelding%202016-03-22%20om%2011.06.51.png" rel="nofollow">http://www.miocrates.com/images/Schermafbeelding%202016-03-22%20om%2011.06.51.png</a></p>

<p>What can be the case here?</p>