Alternative title: What I’ve been doing is wrong

Different browsers have different “default” styles, which makes it a challenge to even make text appear the same way across all of them. When you want to accomplish this, there is a well known CSS trick that I’ve been using for a long time:

html {
    font-size: 100%;
}

body {
    font-size: 62.5%;
}

These rules will make 1em = 10px; font-size: 1.2em is the same as 12px. The method is particularly useful on sites where you want to let the user scale all content using links on the page. The links will adjust the base size on the body element which is inherited to all child elements.

This works for font scaling, but as I discovered, it is inaccurate when setting widths and heights of elements. 96em is NOT exactly 960px. I set out on the interwebs to research and found another method in a comment to an article about font sizes and ems:

html {
    font-size: 1.25em;
}

body {
    font-size: 50%;
}

Apparently, IE doesn’t allow for percentages with decimals, so 62.5% is floored to 62%. This isn’t a big deal for text, but when using it for dimensioning other elements, it’s a deal breaker.

The method above will set 1em = 20px for the html element and then halve this by setting the font size to 50% on the body.

This way is new to me, but after testing it in all major browsers (IE6 included), it seems to work. As you may understand, I’m not really sure about this, so I’m reaching out for you here. Do you have experience using any of these methods to set font and element sizes? Or do you have other methods? Will the latter method always work and in all browsers? Please use the comments if you have any input.