IE9 中的 CSS 相对 href 和 iFrame答案

【问题标题】：CSS relative hrefs and iFrames in IE9IE9 中的 CSS 相对 href 和 iFrame
【发布时间】：2014-02-10 08:44:53
【问题描述】：

我有一个与此相关的非常具体的 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 中发生，但在单独加载页面时不会发生。

【问题讨论】：

标签： html css iframe internet-explorer-9

【解决方案1】：

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

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

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

【讨论】：