html - 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 代表更少的像素)。但是，如果将默认大小更改为 14px 以外的其他内容，nav 中的所有内容都会严重缩放...在 Windows 下，16px 也是如此。 . 整个缩放比例的想法是行不通的。我不需要每个像素都匹配，但它看起来很难看......

类似的问题出现在IE9下，不过这次是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;
}

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

除了这些问题，我还有一个一般性问题。

是否可以使用 rem 单位创建“像素完美”布局？

我什至还没有接触过媒体查询，我想知道这是否值得我付出努力...

非常感谢大家!

Answer 1

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