title: Valid CSS not working in Internet Explorer 11
body: <p>As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at <a href="http://www.bootply.com/H289A4AIGZ" rel="nofollow">Bootstrap checkbox replacement</a> to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.</p>
  
  <p>Does anyone have any ideas what is wrong?</p>
  
  <pre><code>/* CSS used here will be applied after bootstrap.css */
  
  .demo {
    padding:50px;
  }
  
  .demo label{
     top:3px; left:15px;
     margin-right:30px;     
     position:relative;     
  }  
  
  
  input.faChkRnd, input.faChkSqr {
     visibility: hidden;
  }
  
  input.faChkRnd:checked:after, input.faChkRnd:after,
  input.faChkSqr:checked:after, input.faChkSqr:after {
     visibility: visible;
     font-family: FontAwesome;
     font-size:25px;height: 17px; width: 17px;
     position: relative;
     top: -3px;
     left: 0px;
     background-color:#FFF;
     display: inline-block;
  }
  
  input.faChkRnd:checked:after {
     content: '\f058';
  }
  
  input.faChkRnd:after {
     content: '\f10c';
  }
  
  input.faChkSqr:checked:after {
     content: '\f14a';
  }
  
  input.faChkSqr:after {
     content: '\f096';
  }
  </code></pre>
  
  <p><strong>Edited</strong></p>
  
  <p>So just to clarify, if you open up <a href="http://www.bootply.com/H289A4AIGZ#" rel="nofollow">http://www.bootply.com/H289A4AIGZ#</a> in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.</p>