如何修复IE8浏览器下@font-face触发兼容性视图模式的Bug

源自于公开课官网的问题:https://open.163.com
本来是想打算解决公开课APM报警异常的,歪打正着看到了这个问题,就看了一下这个问题:
现象是使用Win7的IE8打开页面之后会提示

163.com的问题导致lnternet Explorer使用兼容性视图刷新网页

这个问题也是坑,百度结果不靠谱,Google又不知道怎么翻译搜索好,搞了好久,大概思路都是在crash,ie8,win7,Compatibility Mode等关键词上,其实也没有考虑别的太多的方面。由于实在是没有思路,所以来了点儿暴力招数:一个一个删除页面上的资源,找出触发Bug的情况,然后再进行分析。
最后定位到一个样式表文件在载入之后会触发页面白屏,最后又通过暴力二分法找到了受影响的语句(其实很快就找到了问题),发现@font-face在注释掉,或者不使用@font-face定义的font-family就不会出现问题。最后改变思路查找问题范围更改到font-face,ie8,crash上,结果找到了一些端倪:

I'm having a problem where icon fonts are causing IE8 to go into Compatibility Mode. And correspondingly, if IE8 is forced into Edge mode (eg. via ) then IE will crash.
来自于:https://stackoverflow.com/questions/25319643/icon-font-causes-compatibility-mode-in-ie8/29441642#29441642

从这来看这个Bug的触发是来自于IconFont使用了Private Use Area的原因,再来看一下Private Use Area是什么东西:

In Unicode, a Private Use Area (PUA) is a range of code points that, by definition, will not be assigned characters by the Unicode Consortium.[1] Currently, three private use areas are defined: one in the Basic Multilingual Plane (U+E000–U+F8FF), and one each in, and nearly covering, planes 15 and 16 (U+F0000–U+FFFFD, U+100000–U+10FFFD). The code points in these areas cannot be considered as standardized characters in Unicode itself. They are intentionally left undefined so that third parties may define their own characters without conflicting with Unicode Consortium assignments. Under the Unicode Stability Policy,[2] the Private Use Areas will remain allocated for that purpose in all future Unicode versions.
来自于:https://en.wikipedia.org/wiki/Private_Use_Areas

正常情况下其实使用Private Use Area去定义自定义符号是完全没有问题,甚至是一个正常的行为,由于IE8的具体实现我们不得而知,所以只能研究到什么行为导致的,所以解决方案也就很清楚了,避开使用Private Use Area就可以解决问题.

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注