MS边缘的iFrame CSS

Question

我建立跨浏览器的扩展，我使用jQuery在文件创建适用于iframe：

$iframe = $("<iframe/>"); 

$iframe.on("load", function() { 
    var font = browser.runtime.getURL("css/font.css"); 
    var style = browser.runtime.getURL("css/style.css"); 

    // on safari I use window.safari.extension.baseURI + path 

    $iframe.contents().find("head").append([ 
     "<link href='"+font+"' rel='stylesheet' type='text/css'/>", 
     "<link href='"+style+"' rel='stylesheet' type='text/css'/>", 
    ]); 
}); 

$iframe.appendTo("html"); 

此工程在浏览器：Chrome浏览器，火狐，Safari，歌剧，但MS不起作用边缘。 iframe被创建，内容被注入。但是这种风格不适用于iframe内容。这只发生在MS Edge中。

什么可能是错的？

Answer 1

经过深入研究后，我发现IE和MS Edge动态样式表加载存在问题，创建“链接”元素时应该添加最后一个“href”属性。

然而，许多不成功的尝试后，我能找到的解决方案，为我工作（需要注意的是href属性必须是确实是最后一个）：

$iframe.contents().find("head").append([ 
    $("<link rel='stylesheet' type='text/css' href='"+font+"'/>"), 
    $("<link rel='stylesheet' type='text/css' href='"+style+"'/>") 
]); 

我不知道为什么是这样工作的。