IE9 and :after/:hover Css property causing page to grow

Question

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.

My after code typically looks like this:

.after:after{
    content: '.';
    height:0;
    line-height: 0;
    display:block;
    clear:both;
    visibility:hidden;
}

So now to the bug. When I added a few :after to my page at https://spartanstats.com/reach-stats-gamertag and I hover over each of the li elements in the middle of the page, IE9 grows the page by one line each time.

EDIT:

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.

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!

Answer 1

Came across this issue myself. It may be related to this issue

Apply min-height: 0% to the containing element.

Answer 2

Have you tried using

content: '';

instead of

content: '.';

Having a character in your after element and setting it to use

display: block;
visibility: hidden;

will still cause the element to take up space on the page unlike when you use:

display: none;

My guess is that even though you're setting the height of the :after element to 0, the . in the element is causing Internet Explorer to render an unwanted height.