Opera12和IE9中的rem单位不准确 [英] Inaccurate rem units in Opera12 and IE9

问题描述

虽然我不是新的回应式设计的想法，我经历了一个非常麻烦的事情...

Although I'm not new to the idea of responsive design I have experienced a very troublesome thing...

我决定完全移动到 rem 单位，但我仍然遵循 62.5％规则（我用它 em ）。

I have decided to completely move to rem units, but I still follow 62.5% rule (I have used it with em).

对于初学者：

html {
   font-size: 62.5%; 
}

我假设 1rem = 10px ）

恐怖开始于 Opera

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

正如你可以看到，我的导航部分是让我们说像素完美使用 rem 单位。在linux页面下有点窄（这是没有问题的字体较小，因此 1rem 表示更少的像素）。但是，如果默认大小更改为 14px ，则 nav 中的所有内容都会缩小true for 16px ...整个缩放想法不工作。我不需要每个像素匹配，但它看起来很丑陋...

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

类似的问题出现在 IE9 下，但这次是标识： p>

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

即使我设置标识的高度和背景的确切大小， ，背景位于 1px 太低...

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.

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

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

大家好！ p>

BIG THANKS guys!

推荐答案

所以...我已经切换回 em 除了IE9中的少量（次要的）毛刺（这是众所周知的子像素问题），在 ALL 浏览器中一切都是完美的。此外，如前 rem 问题，我没有问题与媒体查询，也使用 单位。遗憾的是， rem 单位似乎还不够稳定，无法在现有的网络浏览器中使用。案例已结束...

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

这篇关于Opera12和IE9中的rem单位不准确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！