IE9 renders a white line in the bottom of the page

Question

I recently noticed in several webpages, and some of my own, that when they are displayed in Internet Explorer 9, when its not on Quirks Mode, it renders a white line, about 1px, in the bottom of the page. It's like the html tag was with padding-bottom:1px and wrapped in another element with white background (but it's not, and it has no padding). It looks like the differences between IE9 standards and quirks mode shows when determining a wrapping element's width, but vertically. It also feels like the content of an element gets pushed 1px by a previous element, like their content, but, not margins or borders, were overlapping the next element dimensions.

I can't determine exactly what causes it. Sometimes, a page contains 2 tables and everything is fine. Then you need to add a third one, and the line shows up. Doesn't even need to be tables btw.

Sometimes, reseting css solves it. Setting the same line-height we have on body to links:

body {
    line-height: 1
}
a, links, visited {
    line-height: 1
}

fixes it, but not always. Only thing i can do, is check element by element, disabling/enabling their css rules till it's gone.

I noticed that when there are elements like tables, inputs, textareas, this issue is more likely to happen. 'resetting' their attributes, sometimes, solves it too.

I know it would be easier to provide a code as an example, but like i said, i coudn't determine a pattern for it. I can give you some examples of sites/urls i notice that error (you gotta look at the very bottom of the page and see the difference between IE and another browser, like Firefox):

casinosdelmundo.info, gatosabido.com.br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (the ones with white, or almost white bg, change body background with f12, developer's tool, and you'll see). I found an example even here at stackoverflow (as today, the main page stackoverflow.com is showing that line too, but that can change since, sometimes the issue appears or disappears when new elements show up or are removed):

this question has the white-line: Make link in table cell fill the entire row height

this one has not: FireFox 3 line-height

Check this screenshot, if you still didn't see what im talking about:

the presence of this issue on very established (or not) sites makes me feel it's a IE9 bug and the only definitive fix for it is always use white background, so nobody will notice the white line (the line will still be there though). but thats obviously not the best option. I never found this white line in Chrome or Safari.

So, has anyone faced the same problem and got a better solution?

Doall

I have seen several IE9 rendering questions on SO recently, little tweaks tend to resolve them (like how you messed with the line-height). It's pretty much guaranteed to be an IE bug. Maybe you should log this bug with MS. – Hymenium

Hmm, i just got an email from them: "Thank you for your feedback. We were able to reproduce the issue and are investigating it. Best regards, The Internet Explorer Team." – Apophyllite

Now you can go back to doing dailies while you wait on MS to fix it, Arthas. – Silky

Your email is from an auto-responder and means nothing. Without a link or jsfiddle of the example problem, we can't help. IE9 is the worst browser on the planet so having issues with it is expected and the norm. – Celandine

"IE9 renders a white line in the bottom of the page which you submitted at the Microsoft Connect site. Thank you for your feedback. We are no longer observing this issue with Internet Explorer 10 Platform Preview. If you can still reproduce the issue, please reactivate the feedback or submit a new feedback for the issue." yeah it can be an auto-responder, but looks like they gave some attention. – Apophyllite

I can still see this issue happening in IE 11. Even in the stackoverflow website, if you scroll to the bottom, you will see the white line. – Merrygoround

Answer 1

I'm not sure, cause there is no HTML here, but it is very resemble to standard browser behavior, when it displays inline content. It is due to the fact, that when text is displayed browser needs to leave some space at the bottom for letters and symbols such as: "," , "y" , "p" and so on, cause in that letters there is a part which protrudes to the bottom. You can better understand what I'm talking about when you look at this picture: example of how inline content is displayed

so if you have some markup like

<body>
    <div></div>
    <textarea></textarea>
</body>

you'll get that extra space at the bottom. To get rid off it you have to use there either block element, or set to your inline-element a css style 'display: block'

Aspergillosis

Answer 2

I found a solution to the problem, if an idiotic one: set the toggle of your browser window's Maximize/Restore down to Maximize (= tooltip text; this indicates that the window is in a nonmaximal state). Make the browser window actually smaller than screen fit. Press F11 in this state and there is no white line at the bottom of your screen (Win7 x32 & x64). (BTW, FF dose not have this problem and is the best alternative.)

Damascene

Answer 3

It happens when you use fractional font-sizes.

For example, stackoverflow uses h2 {font-size: 140%;} body { font-size:80%;}, which results in an total font-size of 112% for h2. Apply that to 16px default size, and you get 17.93px (including rounding errors, hooray!)

Try it yourself: getComputedStyle(document.querySelector('h2')).fontSize

Browsers have a hard time rendering fractional pixels, and thus may get confused and add a pixel at the bottom.

By the way, Firefox has some trouble too. The spacing between the footer lines is off by a pixel.

The fix is obvious: Use integer pixels to declare font-sizes.

Yorgo

Answer 4

Another way would be to apply a :after content to your body only for IE and Edge. This way you will get rid of the extra white line. We may require some jQuery too so that the content applies only when you are at the bottom of the page.

body{
    position:relative;
    width:100%;
}
body:after{
    content: "";
    display:block;
    background-color: #000;
    height: 1px;
    bottom: 0px;
    position: fixed;
    width: 100%;
}

jQuery

//add a border to internet explorer
if (bowser.name == "Microsoft Edge" || bowser.name == "Internet Explorer") {
    //console.log(" iam inside");
    $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
            $("body").addClass("end-border");
        }
        else {
            $("body").removeClass("end-border");
        }
    });
}

Hullda