weird behaviour when using 'em' and percentage

Question

I'm building a responsive site and I'd like to use new css3 unit - rem for it.

I've set the base font-size on the html tag to be 1rem which is 16px and then set the body to be 62.5% which supposed to be 10px but when looking at the computed styles in chrome console, I see the body font-size:12px.

I tried setting the body using 0.625em but still the same result, what am I missing?

You can see an example here: http://jsfiddle.net/pPmBm/2/

EDIT:

Just tested on FF and seems to be working fine, so it seems like a chrome problem.

Answer 1

I never worked with rem before, but looking at the site you linked, it seems like you flipped it around:

html { font-size: 62.5%; } 
body { font-size: 1rem; } /* =10px */