Opera12和IE9中的rem单位不准确

Question

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

我已决定完全转移到rem单位，但我仍遵循62.5%规则（我已将其与em一起使用）。

首先对于初学者：

html {
   font-size: 62.5%; 
}

我认为 1rem = 10px （我知道它并不总是如此，但是嘿，这对我来说有点轻松数学，对于浏览器它仍然相对正确吗？）

恐怖开始于 Opera （ 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 queries使用em个单位也没有问题。遗憾的是，rem单位似乎还不够稳定，无法在现有的网络浏览器中使用它们。案件结案......

Answer 2

如果您希望继续使用1rem = 10px，您是否尝试过 -

html {
    font-size: 10px; 
}

而不是

html {
    font-size: 62.5%; 
}

这可以解决问题吗？