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下也存在类似的问题，但这次是标志:

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单位可以创建“像素完美”的布局吗？

我甚至还没有涉及媒体查询，想知道是否值得努力...

非常感谢！

- op1ekun

---

实际上，rem 基于用户设置的值，但我不仅使用 rem 来设置 font-size。我还使用这些单位来设置宽度、高度、填充等，以便所有内容都能随浏览器中设置的 font-size 缩放。至少在除了 Opera 和（毫不意外的）IE 之外的所有浏览器中都是如此。关于你的问题... 嗯，我的布局并不是那么复杂，但我真的很喜欢我的导航栏与我设置的背景相适应（这是唯一一个被精心定位的元素）。我非常喜欢简约的设计风格，但我不想放弃我的设计 :( - op1ekun

"像素完美（pixel perfect）"不适用于rem单位。您可以将rem单位视为与一般尺寸相关的"弹性像素（Elastic Pixels）"。 - wandarkaf

@op1ekun，你应该关注的是vw和vh单位，它们专门为响应式设计技术而建立，并且非常容易使用，现在兼容大多数现代浏览器。如果不兼容，例如IE 6，你可以像html5一样找到一个css shiv。 - Ilan Biala

不要用IE6啊，那些用户只能看到内容，没有花里胡哨的图形。非常感谢，我会尝试的！ - op1ekun

尝试设置标题h1 a的边框为无来实现ie9标志的悬停效果。 - Jani Hyytiäinen

Answer 1

所以...我已经切换回使用em单位。除了IE9中的一些（次要的）小问题（这些是众所周知的子像素问题）之外，在所有浏览器中都非常完美。此外，与之前的rem问题一样，我对使用em单位的media queries也没有问题。遗憾的是，看起来rem单位还不够稳定，不能在现有的Web浏览器中使用。案件结束...

- op1ekun

Answer 2

如果您希望继续使用1rem = 10px，您可以尝试 -

html {
    font-size: 10px; 
}

代替

html {
    font-size: 62.5%; 
}

这解决了问题吗？

- Stuart Robson

---

是的，我也有过这样的经历 :) 如果我使用像素，一切都能完美地运作 :) 但这不是我要寻找的解决方案。如果我使用像素，那么使用 em 或 rem 单位的意义在哪里呢？请记住，我想要一个灵活和响应式的设计 :) 此外，我最近发现了 这个，很可能会使用 em 单位 + font-size: 100%。尽管如此，非常感谢第一个答案 ;) - op1ekun

你仍然可以通过以像素为单位定义初始文档字体大小来保持灵活和响应。正如我刚刚在客户网站上使用EM，并在媒体查询中也使用了EM，因此缩放和调整大小会产生不同的布局，如此文章所述 - http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/ - Stuart Robson

所以为了澄清，在HTML中按照我的答案中的代码设置你的字体大小，然后用REM或EM来完成其他所有事情，这样你就完全准备好响应式设计了 :) - Stuart Robson

不完全是这样... 如果用户在浏览器中设置了不同的 font-size，那怎么办？如果我设置了 font-size: 10px，网站将不再响应用户设置的字体大小。好吧，我们可以忍受这一点，因为我们仍然可以缩放，但我想避免这种情况 :) 不过，还是谢谢您的回答 :) - op1ekun