HTML5   发布时间:2022-04-26  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html5 – Opera12和IE9中的rem单位不准确大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
然我不是新颖的回应设计的想法我经历了一个非常麻烦的事情…

我决定完全移动到rem单位,但我仍然按照62.5%的规则(我已经用em了).

所以对于初学者来说:

html {
   font-size: 62.5%; 
}

我假设1rem = 10px(我知道这并不总是真的,但嘿,这对我来说有点缓解数字,浏览器还是相对的吗?)

恐怖从Opera开始(12.12两个linux和win版本,其中认font-size分别设置为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单位创建“像素完美”布局是否可能?

我还没有触及到媒体查询,我想知道是否值得我努力…

大大谢谢你们!

解决方法

所以…我已经切换回em除了IE9(这是众所周知的子像素问题)中的少数(次要)故障,所有浏览器都是完美的.此外,像以前的rem问题一样,我也没有问题,媒体查询也使用em单位.可悲的是,似乎rem单元还不够稳定,不能在现有的网络浏览器上使用它们.案件关闭

大佬总结

以上是大佬教程为你收集整理的html5 – Opera12和IE9中的rem单位不准确全部内容,希望文章能够帮你解决html5 – Opera12和IE9中的rem单位不准确所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。