Inaccurate rem units in Opera12 and IE9

Question

Although I'm not new to the idea of responsive design I have experienced a very troublesome thing...

I have decided to completely move to rem units, but I still follow 62.5% rule (I have used it with em).

So for starters:

html {
   font-size: 62.5%; 
}

I assume that 1rem = 10px (I know it's not always true, but hey, it's for me to ease math a little bit, for browser it's still relative right?)

Horror starts in Opera (12.12 both linux and win version, where default font-size is set to 14px and 16px respectively).

header nav ul li a span {
    padding: 1.8rem 2.7rem 3rem 0;

    font-family: 'sawasdeebold', sans-serif;
    font-size: 2rem;
    line-height: 3rem;

    letter-spacing: -0.3rem;
    display: block;
}

As You can see part of my navigation is let's say "pixel perfect" thanks to using rem units. Under linux page is a little bit narrower (that's no problem the font is smaller so 1rem represents less pixels). However everything in nav scales badly if default size is changed to something else than 14px... Under Windows the same is true for 16px... The whole scaling idea just doesn't work. I don't need every pixel to match, but it looks ugly...

The similar problem appears under IE9, but this time is the logotype where:

header h1 a {
    margin: 1.8rem 0 0 1.6rem;
    width: 46.2rem;
    height: 10.1rem;
    background: transparent url(../static/img/logotype.jpg) 0 0 no-repeat;
    background-size: 46.2rem 20.2rem;
    text-indent: -5000px;
    display: block;    
}

header h1 a:hover {
    background-position: 0 -10.1rem;
}

Even though I set logotype's height and the exact size for its background, on hover, the background is positioned 1px too low...

Aside of these problems I have one, general question.

Is it POSSIBLE to create "pixel perfect" layouts with rem units?

I haven't even touched media queries yet and I want to know if it's worth my effort...

BIG THANKS guys!

Answer 1

If you're wishing to continue use 1rem = 10px have you tried –

html {
    font-size: 10px; 
}

instead of

html {
    font-size: 62.5%; 
}

does this solve the issue?

Answer 2

So... I have switched back to em untits. Except few (minor) glitches in IE9 (which are well known subpixel problems) everything is perfect in ALL browsers. Moreover, as before rem issue, I have no problem with media queries which also use em units. Sadly, it seems that rem units are not yet stable enough to use them across existing web browsers. Case closed...