CSS relative hrefs and iFrames in IE9

I have a pretty specific IE9 problem that relates to this, for example (but here it only applies to IE8 and less) IE8 web font iframe workarounds

I have pages with iFrames inside an iframe, e.g.

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

iframe 2 loads iframe1 dynamically. I also have a fonts.css stylesheet that has fonts encoded this way:

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

which is next to iframe1 in

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

iframe2.html loads the fonts.css file from this folder:

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

And this works fine with other browsers except IE9, the result is as follows:

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

Looking at the Network tab in the developer tools in IE9, it shows that the browser is trying to download the font file from the root folder:

404 %folder_with_top_page%/style/fonts.css

, fonts.css, . fonts.css % folder_with_iframe3.html%/style/fonts.css, , , , , , ​​ > IE9? , , , .

:

1) , , , IE9? 2) , : "correct" (= wrong, root-ish), fonts.css , , ( aka % folder_with_iframe2.html%/style/fonts.css) - (, CSS jQuery ).

iframe, .

+3
1

, iframe, , . , DOM, href JS.

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

, href .

-1

All Articles