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

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%.

---

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 %.

---

You could just use:

html {font-size:10px}

So know you can work just with rem or em without complex calculations: 1 rem = 10px 2 rem = 20px

---

The percent unit depends on the set of the browser. In case of web accessibility, the default setting of most browsers make 16px equals to 100%, so 10px equals to 62.5%. However, if you set the browser's default font size setting to smaller or bigger, the 62.5% does't equals to 10px yet.