css - font-size:62.5% vs. font-size:10px

Question

For a long time I've been using

body {font-size:62.5%;}

in CSS documents since it's supposed to make 1em equal 10px. However, I recently noticed that this isn't the case for me in Internet Explorer. So instead I tried the code:

html {font-size:100%}
body {font-size:10px}

Now this works like a charm for me. My question is:

What's the drawback of this solution since I can't find anyone else using it?

To clarify: I later specify all my font-sizes, widths, heights and so forth in em. It's just in the body I use 10px instead of 62.5%.

Answer 1

You're going to get arguments for both sides of this issue. I'm guessing a majority are going to argue for %. But you asked for drawbacks or pitfalls

The main drawback you would encounter would be if you ran across a browser or device that honored your pixel setting instead of a percentage of whatever it's default is, and that pixel setting happened to be problematic or too small to read. If that browser didn't offer the user an opportunity to either scale the font or zoom in on the page, then you could have a potential problem.

All that said, almost every browser these days has that default set at 16px. I can't speak to why IE in your case is sizing it differently. If you are going for a pixel perfectly sized design, then use px, otherwise I'd suggest staying with the %.