title: IE9 and :after/:hover Css property causing page to grow
body: <p>According to microsoft, IE8 and IE9 support the :after selector. I use this selector to force elements to have the proper height, if all the elements inside are floated. This allows backgrounds to show up properly, without having to specify a set height.</p>
  
  <p>My after code typically looks like this:</p>
  
  <pre><code>.after:after{
      content: '.';
      height:0;
      line-height: 0;
      display:block;
      clear:both;
      visibility:hidden;
  }
  </code></pre>
  
  <p>So now to the bug. When I added a few :after to my page at <a href="https://spartanstats.com/reach-stats-gamertag" rel="nofollow">https://spartanstats.com/reach-stats-gamertag</a> and I hover over each of the li elements in the middle of the page, IE9 grows the page by one line each time.</p>
  
  <p>EDIT:</p>
  
  <p>Upon further investigation the :hover property on each of the dynamically generated li elements is seemingly the root cause of the problem. Removing the hover code for the li's fixes the problem. Of course this isn't the fix I was hoping for. I'll keep investigating.</p>
  
  <p>Currently I'm lost in finding the solution to this issue. But I know my users will potentially hate the site when it starts growing out of control!</p>