html - IE9 中的 CSS 相对 href 和 iFrame

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 开发工具中的“网络”选项卡，它显示浏览器正在尝试从根文件夹加载字体文件:

404 %folder_with_top_page%/style/fonts.css

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

我的问题如下:

1) 这是否与我在 IE9 中发布的链接中描述的问题相同？2)这将是最有意义的解决方法:只需将字体文件插入“正确”(=错误，root-ish)文件夹，将 fonts.css 文件与加载它的文件放在同一级别(也就是将文件复制到 %folder_with_iframe2.html%/style/fonts.css)或其他东西(例如在网站加载后使用 jQuery 再次将 CSS 附加到页面)。

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

Answer 1

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

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

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