Opera12和IE9中的rem单位不准确

Question

虽然我对响应式设计的想法并不陌生,但我遇到了一件非常麻烦的事情......

我已经决定完全转移到rem单位,但我仍然遵循62.5%规则(我用过它em).

所以对于初学者:

html {
   font-size: 62.5%; 
}

我假设1rem = 10px(我知道它并不总是正确的,但是,嘿,这对我来说有点简化数学,对于浏览器它仍然相对正确吗？)

恐怖的开始歌剧院(12.12 Linux和win版,其中默认字体大小设置为14px和16px分别).

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;
}

正如你可以看到我导航的一部分是因为使用rem单位让我们说"像素完美" .在linux下页面有点窄(没有问题,字体较小,因此1rem代表较少的像素).然而,nav如果将默认大小更改为除了以外的其他内容,那么所有内容都会严重缩放14px...在Windows下,同样适用于16px......整个扩展的想法都不起作用.我不需要每个像素匹配,但它看起来很难看......

类似的问题出现在IE9下,但这次是标识,其中:

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;
}

即使我设置了标识的高度和背景的确切大小,但在悬停时,背景位置1px太低......

除了这些问题,我还有一个一般问题.

用rem单位创建"像素完美"布局是否可行？

我还没有触及媒体查询,我想知道这是否值得我的努力......

非常感谢!

Answer 1

所以...我已经切换回em单位了。除了 IE9 中的一些（小）故障（众所周知的子像素问题）之外，所有浏览器中的一切都是完美的。此外，与之前的问题一样，我对使用单位rem没有任何问题。遗憾的是，这些单元似乎还不够稳定，无法在现有的网络浏览器上使用它们。案件结案...media queriesemrem