IE8 网页字体 iframe 错误解决方法 [英] IE8 web font iframe bug workarounds

查看：19 发布时间：2021/12/21 23:06:34 css iframe internet-explorer-8 rendering font-face

本文介绍了IE8 网页字体 iframe 错误解决方法的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这篇博文(有点烦人的页面那里)(顺便说一下，那不是我的博客)描述了我昨天仅在 Internet Explorer 8 中遇到的一个奇怪的错误.该错误涉及 .EOT 网络字体和 </code> 元素.<em class="showen"></em></p> <p class="en">This blog post (slightly annoying page there) (and that's not my blog by the way) describes a bizarre bug I ran into yesterday in Internet Explorer 8 only. The bug involves .EOT web fonts and <code><iframe></code> elements.</p> <p class="cn">我没有广泛研究该错误的确切触发因素，但基本上是这样的情况，即使用 Web 字体的页面将内容加载到 <code><iframe></code> 中，这样框架 <em>also</em> 使用的网络字体会被浏览器破坏".以前用 Web 字体渲染的 OK 文本突然变成了看起来很糟糕的 Arial 或其他东西，有点像它自己.有时它会翻转回来，只是在随机用户交互(如鼠标移动)时再次降级.<em class="showen"></em></p> <p class="en">I haven't extensively researched the exact trigger for the bug, but it's basically the case that a page using a web font that loads content into an <code><iframe></code> such that the frame <em>also</em> uses a web font becomes "defaced" by the browser. The previously-OK text rendered with the web font suddenly shifts to awful-looking Arial or something else, sort-of on its own. Sometimes it flips back, only to degrade again on random user interactions like mouse moves.</p> <p class="cn">那篇博文有一个例子.澄清一下，是包含页面搞砸了，而不是 <code><iframe></code> 中的页面(至少，目前我的经验是这样).<em class="showen"></em></p> <p class="en">That blog post has an example. To clarify, it's the containing page that gets messed up, not the page in the <code><iframe></code> (at least, that's the case so far in my experience).</p> <p class="cn">有没有人找到比该博客中建议的更好的解决方法，即强制重新加载"CSS <code><link></code> 元素，<code>@font-face</code> 声明来了?(我可以这样做，但它会有点痛苦，而且它会迫使我将字体设置移出我的文档 <code><head></code>，如果我记得这是一个性能问题；我'我必须四处寻找，再次找到那个花絮.)<em class="showen"></em></p> <p class="en">Has anybody found a better workaround than what's suggested in that blog, which is to force a "reload" of the CSS <code><link></code> element from whence the <code>@font-face</code> declarations come? (I could do that but it'd be a minor pain, plus it would force me to move my font setup out of my document <code><head></code> which if I recall is a performance issue; I'll have to scrounge around and find that tidbit again.)</p> <p class="cn"><em>编辑</em> —<strong>更新</strong></p> <p class="cn">好的<a href="http://gutfullofbeer.net/ie8/index.html" rel="noreferrer">这是一个测试页面</a>.这是主(容器)页面:<em class="showen"></em></p> <p class="en">OK here's a test page. Here's the main (container) page:</p> <pre><code><code><!DOCTYPE html> <html> <head> <style id='font_style'> @font-face { font-family: 'bold-display'; src: url('DejaVuSans-Bold.eot'); } </style> <style> .fancy { font-family: bold-display, "franklin gothic medium", "verdana", sans-serif; font-size: 32px; } iframe { width: 500px; height: 200px; } #floater { position: absolute; top: 100px; left: 100px; display: none; } #floater.showing { display: block; } </style> <script> function load() { var frame = document.createElement('iframe'), floater = document.getElementById('floater'), target = document.getElementById('target'); frame.src = 'frame.html'; target.appendChild(frame); floater.className += 'showing'; } function unload() { var floater = document.getElementById('floater'), target = document.getElementById('target'); target.innerHTML = ''; floater.className = floater.className.replace(/showing/g, ''); } </script> </head> <body> <div class='fancy'>Hello World</div> <button type='button' onclick='load()'>Click Me</button> <div id='floater'> <div id='target'></div> <button type='button' onclick='unload()'>Close</button> </body> </html> </code></code></pre> <p class="cn">框架页面具有相同的 <code>@font-face</code> 和一个虚拟消息.<em class="showen"></em></p> <p class="en">The frame page has the same <code>@font-face</code> and a dummy message.</p> <p class="cn">该问题似乎与<em>使用</em>加载的字体以及包含多个替代字体的列表有关.我(无缘无故)在我的字体系列"值中加入了一些类似的更常见的字体.当我把它们放回:<em class="showen"></em></p> <p class="en">The problem appears to have something to do with <em>using</em> the loaded fonts with a list of more than one alternate font. I (for no good reason) had tossed in a couple of similar more-common fonts in my "font-family" values. When I dropped them back to:</p> <pre><code><code> .title { font-family: bold-display, sans-serif; } </code></code></pre> <p class="cn">然后问题就消失了(或者至少到目前为止它似乎已经消失了).<em class="showen"></em></p> <p class="en">then the problem went away (or at least it seems to have gone away so far).</p> <p class="cn">感谢那些提供帮助的人.给@albert，添加一个总结您尝试过的内容的答案，我会为您点赞:-)<em class="showen"></em></p> <p class="en">Thanks to those who've helped out. To @albert, add an answer summarizing what you tried and I'll upvote you :-)</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">因此，以下内容不会影响性能(<em>只要您的 CSS 大小合理</em>)，您就可以离开<code><link></code> 标签在 <code><head></code> 中，它可以正常工作，但您基本上仍然在重新加载"您的 <code><link></code>> 元素(尽管您不是通过重置它们的 url 来实现的).<em class="showen"></em></p> <p class="en">So, there is no performance hit with the following (<em>as long as your CSS is reasonably sized</em>), you get to leave the <code><link></code> tag in <code><head></code>, and it works without issue, but you are still basically 'reloading' your <code><link></code> elements (though you are not doing so by resetting their url).</p> <p class="cn">关于删除 <code><iframe></code> 元素，只需执行以下操作:<em class="showen"></em></p> <p class="en">On the removal of the <code><iframe></code> element, simply do the following:</p> <pre><code><code>var sheets = document.styleSheets; for(var s = 0, slen = sheets.length; s < slen; s++) { sheets[s].disabled = true; sheets[s].disabled = false; } </code></code></pre> <p class="cn">重新加载是我真正能想到的工作，因为它似乎正在从 <code><iframe></code> 的垃圾收集中删除它.设置一个<a href="http://imgineme.com/iframeremoval.html" rel="noreferrer">测试页面</a>，显然只适用于 IE 8.<em class="showen"></em></p> <p class="en">Reloading is all I can really think of as working since it seems to be removing it in garbage collection from the <code><iframe></code>. Set up a test page that obviously only works for IE 8.</p> <p class="cn"><strong>注意:</strong>我最初无法使用 Google 网络字体重现此问题，为此我不得不专门下载 <code>.eot</code> 字体.因此，您的解决方法可能是先使用 WOFF 字体，然后仅在必要时加载 EOT.<em class="showen"></em></p> <p class="en"><strong>Of Note:</strong> I was originally unable to reprodcue this issue using Google web fonts, and had to specifically download a <code>.eot</code> font for use for this. So your work around maybe to use WOFF fonts first, and only load EOT if necessary.</p> <p class="cn">不确定这是否是您要查找的内容，但如果不是，请说明清楚，我会根据需要进行编辑.<em class="showen"></em></p> <p class="en">Not exactly sure if this is what you were looking for, but if it's not, please clarify and I'll edit as necessary.</p> <p class="cn"><strong>更新 1:原因</strong></p> <p class="cn">所以，我已经缩小了问题的原因.我只有在发生以下情况时才能重现(这是一个令人讨厌的人).<em class="showen"></em></p> <p class="en">So, I've narrowed down the cause of the issue. I am only able to reproduce if the following occurs (and this is a nasty one folks).</p> <ul class="cn"><li>并且 <code><iframe></code> 包含在父元素中</li><li>父元素的类发生了变化</li><li>类<strong>不会</strong>改变它被应用到的元素的<code>display</code>(或者实际上，如果它没有改变<code><iframe></code> 元素)</li><em class="showen"></em></ul> <ul class="en"> <li>And <code><iframe></code> is contained within a parent element</li> <li>The parent element's class is changed</li> <li>The class <strong>does not</strong> change the <code>display</code> of the element it is being applied to (or really, if it does not change the overall display on the <code><iframe></code> element)</li> </ul> <p class="cn">而且，据我所知，是的，它必须是类名.如果对元素的 <code>id</code> 执行相同的步骤，我无法重现.严重地.这是一个讨厌的.我会继续挖一点.<em class="showen"></em></p> <p class="en">And, from what I can tell, yes, it has to be the class name. I was unable to reproduce given the same steps on the <code>id</code> of an element. Seriously. This one is a nasty one. I'll keep digging a bit.</p> <p class="cn"><strong>更新 2:次要原因</strong></p> <p class="cn">如果绘制时<code><iframe></code>未完全在浏览器窗口中，则不会加载<code><iframe></code>窗口内的字体，并将卸载主窗口在必须重绘页面时的字体(尤其是在调整页面大小时).这是一个棘手的错误.<em class="showen"></em></p> <p class="en">If the <code><iframe></code> is not fully in the browser window on draw, it will not load the font within the <code><iframe></code> window, and will unload the font for the main window whenever it has to redraw the page (most notably when it is resized). This is a gnarly bug.</p> <p class="cn"><strong>更新 3:应该是什么解决方案</strong></p> <p class="cn">不使用<code>display:none;</code>，将元素的高度和宽度设置为<code>0px</code>和<code>overflow: hidden;</code>，您将获得与 display none 相同的效果，但它不会将其从 DOM 中删除，因此不会重新绘制页面并使用您的字体.我之前的<a href="http://imgineme.com/iframeremoval.html" rel="noreferrer">测试页面</a>已更新，因此您可以看到对以前的错误的影响.<em class="showen"></em></p> <p class="en">Instead of using <code>display: none;</code>, set the height and the width of the element to be <code>0px</code> and the <code>overflow: hidden;</code>, and you'll get the same effect as display none, but it will not remove it from the DOM, thereby not redrawing the page and taking your font. My test page from before has been updated, so you can see the effect on what used to be the bug.</p> <p>这篇关于IE8 网页字体 iframe 错误解决方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2701069');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="IE8网络字体iframe错误解决方法" href="/562878.html"> IE8网络字体iframe错误解决方法; </a> </li> <li> <a target="_blank" title="“getElementsByTagName”的解决方法是什么？在IE8？" href="/911790.html"> “getElementsByTagName”的解决方法是什么？在IE8？; </a> </li> <li> <a target="_blank" title="IE8 embedded PDF iframe" href="/2928438.html"> IE8 embedded PDF iframe; </a> </li> <li> <a target="_blank" title="pmAuto ModalPopupMode正确使用或错误解决方法" href="/2042293.html"> pmAuto ModalPopupMode正确使用或错误解决方法; </a> </li> <li> <a target="_blank" title="错误解决方法:“无法实例化抽象类"" href="/2751045.html"> 错误解决方法:“无法实例化抽象类"; </a> </li> <li> <a target="_blank" title="C ++抽象类参数错误解决方法" href="/1730434.html"> C ++抽象类参数错误解决方法; </a> </li> <li> <a target="_blank" title="IE8 iframe DesignMode丢失选择" href="/2284835.html"> IE8 iframe DesignMode丢失选择; </a> </li> <li> <a target="_blank" title="IE8 getPrototypeOf方法" href="/650333.html"> IE8 getPrototypeOf方法; </a> </li> <li> <a target="_blank" title="IE8：拖放文件到网页" href="/656163.html"> IE8：拖放文件到网页; </a> </li> <li> <a target="_blank" title="Google翻译iframe解决方法" href="/1482574.html"> Google翻译iframe解决方法; </a> </li> <li> <a target="_blank" title="IE8 随机渲染字体权重" href="/2674997.html"> IE8 随机渲染字体权重; </a> </li> <li> <a target="_blank" title="IE8中的字体大小" href="/1274453.html"> IE8中的字体大小; </a> </li> <li> <a target="_blank" title="IE8随机呈现字体的权重" href="/567217.html"> IE8随机呈现字体的权重; </a> </li> <li> <a target="_blank" title="字体家族是否有解决方法:IE7的继承" href="/2136066.html"> 字体家族是否有解决方法:IE7的继承; </a> </li> <li> <a target="_blank" title="VS2010 COM互操作错误解决方法吗？（INetFwMgr）" href="/30458.html"> VS2010 COM互操作错误解决方法吗？（INetFwMgr）; </a> </li> <li> <a target="_blank" title="显示跨域内容的IFrame（IE8）" href="/33479.html"> 显示跨域内容的IFrame（IE8）; </a> </li> <li> <a target="_blank" title="IE8 + Visual studio错误" href="/911255.html"> IE8 + Visual studio错误; </a> </li> <li> <a target="_blank" title="IE8" href="/1349036.html"> IE8; </a> </li> <li> <a target="_blank" title="固定表标题(IE8)[已解决]" href="/1436441.html"> 固定表标题(IE8)[已解决]; </a> </li> <li> <a target="_blank" title="IE8不选择“向左浮动”和“字体”" href="/557874.html"> IE8不选择“向左浮动”和“字体”; </a> </li> <li> <a target="_blank" title="字体不工作在IE8如预期" href="/564516.html"> 字体不工作在IE8如预期; </a> </li> <li> <a target="_blank" title="使用IE8添加方法时出现JavaScript错误" href="/911534.html"> 使用IE8添加方法时出现JavaScript错误; </a> </li> <li> <a target="_blank" title="ie8兼容性 - IE8 浏览器下，iconfont 字体图标不渲染" href="/711989.html"> ie8兼容性 - IE8 浏览器下，iconfont 字体图标不渲染; </a> </li> <li> <a target="_blank" title="?#iefix 如何解决 IE6-IE8 中网页字体加载的问题?" href="/2683968.html"> ?#iefix 如何解决 IE6-IE8 中网页字体加载的问题?; </a> </li> <li> <a target="_blank" title="Firefox错误？解决方法？" href="/1071810.html"> Firefox错误？解决方法？; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = 'ie8,网页,字体,iframe,错误,解决方法'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>