Question

我有一个非常具体的IE9问题，例如（但这里只涉及IE8及更少）IE8 web font iframe bug workarounds

我的网页在iframe中有iFrame，如此

Top page
 -- iframe1.html
 -- -- iframe2.html
 -- -- -- iframe3.html

iframe 2由iframe1动态加载。我还有一个fonts.css样式表，其中包含以这种方式编码的字体：

src:url(data:font/opentype;base64, /*FONT HERE */

位于

中iframe1的文件夹旁边

/%folder_with_top_page%/%folder with iframe1.html%/style/fonts.css

iframe2.html从该文件夹加载fonts.css文件：

<link rel="stylesheet" type="text/css" href="../style/fonts.css" />

这适用于其他浏览器就好了，除了在IE9中，结果如下：

page loads
page flashes with correct fonts
page reverts to New Times Roman/default serif font

查看IE9中dev工具中的Network选项卡，它显示浏览器正在尝试从根文件夹加载fonts文件：

404 %folder_with_top_page%/style/fonts.css

如果我也将fonts.css文件放在那里，一切正常，但这似乎没必要。在％folder_with_iframe3.html％/ style / fonts.css中还有一个名为fonts.css的文件，该文件加载正常并且似乎与第一个链接中描述的问题有关，但我认为问题已在＆gt; IE9中修复了？我知道页面结构在任何情况下都不是最佳的，但是我不应该更改它。

我的问题如下：

1）这是否与我发布的链接中描述的问题相同，但在IE9中却是如此？ 2）哪种解决方法最有意义：只需将fonts文件插入“correct”（=错误的root-ish）文件夹，将fonts.css文件放入与加载它的文件相同的级别（即将文件复制到％folder_with_iframe2.html％/ style / fonts.css）或其他内容（例如在加载网站后使用jQuery将CSS再次附加到页面上）。

行为仅在iframe中发生，但在单独加载页面时不会发生。

Answer 1

我偶然发现了这篇文章，同时用嵌入式iframe诊断类似问题，尝试加载带有相对链接的样式表，并将请求转到外部页面。为了解决这个问题，我将链接标记附加到DOM，然后使用JS设置href属性。

var cssLink = "<link rel='stylesheet' type='text/css' id='addcss'/>";
$('head').append(cssLink);
$('#addcss').attr('href', src);

在初始标记中包含href时，我能够一致地重现该问题，并且在实现此修复后无法重现该问题。

IE9中的CSS相对hrefs和iFrames

1 个答案: