rem values rendering differently in modern browsers

Part of my job is making UIs look nice from time to time. Please know that browser rendering differences will eventually give me a stress induced ulcer. It's fine, I've accepted it... Let's move on. Although I (usually) no longer have to make IE7 look the same as other browsers, I can testify that there are still some frustrating differences between modern browsers that will haunt your dreams, even with Normalize.css there to protect you.

Fortunately, there are little tips (not hacks, tips) that you should know which will make your life much easier. I'm about to let you in on some potentially life saving info about rem values.

rem values

If you don't know, rem values are relative to the root (html) element font-size, em values are relative to their parent's font-size.
(rem value) = (desired px value) / (root font size)
16px is the root font size for all browsers. You can overwrite this by changing the font-size in the html element of your css.

Let's say you want to set the base-font and baseline for your entire page. You want your font-size to be 20px and your line-height to be 30px. Also, you want to use 'rem' values instead of 'px' because you care about user preferences, accessibility, and there's no way in hell you're using 'em'.
That's cool, you'd probably write your code like this:

html {
  /* Root font size at this point is 16px. 1rem = 16px
   * overwrite it here to 20px so later 1rem = 20px;
   */
  font-size: 1.25rem; /* 20px / 16px = 1.125 */
  line-height: 1.875rem; /* = 30px / 16px = 1.875 */
}

p {
  /* Root font-size was changed to 20px above*/
  font-size: 0.75rem; /* 15px / 20px = 0.75 */
}

My friend, I've deceived you.
You see, you overwrote the root font-size but what about the line-height? You set that to 1.875rem. At the rendering time, does it think 1rem = 16px (default font-size) or 20px (overwritten font-size)? Good question, it depends on what browser you're asking. Firefox will say your line height is 37.5px (20px * 1.875) while Chrome will say 30px (16px * 1.875). That's a pretty big difference especially when dealing with line-heights.

Which browser is correct? Doesn't matter. What matters is how to avoid this problem.

The Tip

Don't put any attributes except for font-size in the html style!!

If you declare your site-wide styles in the body element instead, you can be reassured that the root font-size will have already been overwritten. For example, the following code will successfully give you a site-wide font-size of 20px and line-height of 30px using good ol' rems in all modern browsers!

html {
  font-size: 1.25rem; /* 20px / 16px = 1.125 */
}

body {
  line-height: 1.5rem; /* 30px / 20px = 1.5 */
}

p {
  font-size: 0.75rem; /* 15px / 20px = 0.75 */
}

Ta da!

Don't believe me? I don't know why you wouldn't but just in case, I made some fiddles for you.

Fiddle #1 - looks different in Firefox / chrome

Fiddle #2 - looks the same in Firefox / Chrome