ie11和edge浏览器下REM的bug

最近在做项目的时候，为了进行响应式的操作，采用了现在出现的一个新的单位——REM，在主流的浏览器都是没什么问题的。但是在ie出现了灵异的bug。

bug表述：加载页面的时候，页面的所有元素没有按照对应获取的js来计算出来的rem值来进行显示。但是在鼠标悬浮在对应的元素时会自己动按照对应的计算值来显示，从而就会出现闪烁的bug。

由于上述代码还带有 resize 函数，假如 body 元素没有添加 font-size:100% 时。当窗口发生变化时总记录上一次的的 font-size 大小。当调试时，就变得正常了。同样需要清除缓存，退出浏览器才能继续查看 bug。

添加 body 样式后正常，估计是在 IE11 下获取不了动态修改过的 html 的内联样式，body 一直默认浏览器 font-size:14px。所以字体变得很小。将 body{font-size:100%} 继承父元素大小，就可以了。

body {font-size:100%
}

但是按照rem的表述rem不是根据html font-size计算吗？为什么还要设置body呢？这问题有待解决。

说明:字体大小单位rem创建了一个追大小，该字体大小是相当于在HTML或body元素中的已经声明的基本字体大小而言的，如果未声明基本字体大小，则是相对于内建字体大小的。

另外：在谷歌火狐内核的浏览器下，页面被渲染之前根元素文字的默认大小被定义了2次。第一次是css定义。第二次是js计算。最后使用的字体大小是后者。但貌似在ie浏览器中，ie认的是前者。这可能与ie浏览器和其他浏览器的读取顺序有关。

欢迎大家相互学习交流

说明：转载请联系作者并获得作者授权，同时注明转载的地址和作者

ie11和edge浏览器下REM的bug相关推荐

win10禁用浏览器css,Win10系统解决使用Edge浏览器下的隐藏设置
Win10系统解决使用Edge浏览器下的隐藏设置, Win10系统edge浏览器下有一些隐藏设置.在普通设置页面中找不到这些隐藏设置.您需要使用一些特殊方法来使用这些隐藏设置.这里说明如何使用Win1 ...
niceScroll在ie11和edge浏览器上面滚动时抖动问题
niceScroll 是一个很好的jquery插件,相信很多人都用过,我们项目中使用的是3.7.6版本的,一般我们在开发的时候都是使用的火狐或者是谷歌浏览器,使用 niceScroll 没有什么问题, ...
Chrome浏览器中安装Edge浏览器下已安装的扩展插件
目录 1.确定Edge浏览器存放扩展插件的位置 2.确定欲安装的插件位置 3.进入Chrome安装插件的界面 1.确定Edge浏览器存放扩展插件的位置在Edge浏览器的地址栏中输入:edge://v ...
edge浏览器如何把网页放到桌面_edge浏览器怎么把网页放桌面 - 卡饭网
win10 Edge浏览器怎么收藏网页到收藏夹并显示出来 win10 Edge浏览器怎么收藏网页到收藏夹并显示出来 win10 Edge浏览器怎么收藏网页到收藏夹并显示出来?自从安装了Win10正式版 ...
计算机开机引导兼容模式,win10电脑Edge浏览器的兼容模式如何开启
win10电脑Edge浏览器的兼容模式如何开启腾讯视频/爱奇艺/优酷/外卖充值4折起今天给大家介绍一下win10电脑Edge浏览器的兼容模式如何开启的具体操作步骤. 1. 打开电脑之后,双击Ed ...
Edge 浏览器 URLSearchParams bug 修复
背景 URLSearchParmas API 为 URL 的查询字符串(query string)提供了方便操作的接口,管理端的项目大多都应用了该接口,但这个 API 因为部分浏览器没有实现(如 IE ...
win7上安装microsoft edge浏览器，模拟ie11模式
使用场景: 近期使用vue2开发项目,win7电脑需要兼容ie11,所以使用edge浏览器模拟ie11,踩得坑比较多,在此记录一下. 安装edge [官网] https://www.microsoft ...
浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码，前后端解决方案
浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案参考文章: (1)浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码,前后端解决方案 (2)https:// ...
苹果或推出Windows版Safari浏览器；微软正“取下”Chromium版Edge浏览器的Beta标签；亚马逊申请新专利……...
关注并标星星CSDN云计算速递.最新.绝对有料.这里有企业新动.这里有业界要闻,打起十二分精神,紧跟fashion你可以的! 每周两次,打卡即read 更快.更全了解泛云圈精彩news go ...

ie11和edge浏览器下REM的bug

ie11和edge浏览器下REM的bug相关推荐

最新文章

热门文章