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(我知道这并不总是正确的，但是嘿，这是让我稍微简化数学，对于浏览器它仍然相对正确?)
I assume that 1rem = 10px (I know it's not always true, but hey, it's for me to ease math a little bit, for browser it's still relative right?)
恐怖开始于 Opera(12.12 linux 和 win 版本，其中默认字体大小设置为 14px 和 16px 分别).
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 中的所有内容都会严重缩放......在 Windows 下，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下也出现了类似的问题，不过这次是标识在哪里:
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...
非常感谢各位！
推荐答案
所以...我已经切换回 em 单元.除了 IE9 中的少数(小)故障(众所周知的子像素问题)之外，在 ALL 浏览器中一切都完美无缺.此外，在 rem 问题之前，我对 media queries 也没有问题，它也使用 em 单位.遗憾的是，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屋！
