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!

Shackleton

Indeed rem is based on user-set value, but I use rem not only for font-size. I use these units to also set widths, heights, paddings etc. so everything scales with font-size set in the browser. At least in all browsers except Opera and (no suprise) IE. About your question... Well, my layout really isn't that complicated, but I really like my navigation to fit the background I set (this the only element which is positioned so carefully). I like minimalistic approach very much, but I don't want to throw away my design :( – Shackleton

"pixel perfect" is not made for rem unit. You can see the rem units like "Elastic Pixels" related to general dimensions. – Erb

I understand that perfectly that is why I used "" around "pixel perfect" :)... It's not really pixel perfect in most parts it's fluid I use % and min-width for positioning purpose wherever I can. – Shackleton

@Shackleton What you should look at are the vw and vh units, built specifically for a responsive design technique and are very easy and now compatible with most modern browsers. If it isn't, such as with IE 6, you can find a css shiv like there is for html5. – Rafe

God no! No IE6 ;) there users can see only the content... no fancy-shmancy graphics ;) Big thanks, I will try it! – Shackleton

Unfortunately this looks bad: caniuse.com/viewport-units :( – Shackleton

for the ie9 logo hover, try setting header h1 a{ border: none; } – Jemison

Answer 1

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

Shackleton

Answer 2

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?

Impostor

Yup, I've been there :) If I use pixels everything works perfectly :) but it's not the solution I'm looking for. If I use pixels where's the point in using em or rem units? Remember that I want a flexible and responsive design :) Moreover I have recently found this and I will, most probably, stay with em units + font-size: 100%. Nevertheless, BIG thanks for the first answer ;) – Shackleton

you can still be flexible and responsive by defining your initial document font-size in px though. As I've just used this for a client site, using EMs and with EMs in the Media queries too, so zooming in and resizing gives a different layout as per - blog.cloudfour.com/… – Impostor

so to clarify, set your font-size in px once in the HTML as per the code in my answer then do everything else w/ REMs or EMs and you're perfectly #rwd ready :) – Impostor

Not really... What if user has a different font-size set in his/her browser? If I set font-size: 10px the website will no longer react to the font size set by user. Ok we can live with that because we can still zoom in/zoom out, but I want to avoid that :) Still, thank You for your answers :) – Shackleton