IE11 / Edge不遵守DOM中的链接/ css顺序

Question

tl; dr：IE11 / Edge似乎优先考虑最后使用javascript加载的CSS文件中的样式，而不是样式在DOM结构中的显示方式。

我找不到其他人已报告此问题，但正在寻求帮助来确认我的问题。

我有一个加载JS库的功能（如果cdn失败，则在本地加载），其中包括一行到'head'元素的'appendTo'或'prependTo'（传递“ method”）。

$("<link>", { rel: "stylesheet", type: "text/css", "href": css })[method]("head");

问题是核心网站样式可能会覆盖库样式，因此我认为'prependTo''head'可以确保核心样式覆盖库-这在Firefox和Chrome中确实有效。但是在IE中，库样式仍然被覆盖，就好像CSS文件位于DOM中的核心文件之后，即使通过检查DOM显示它早于DOM。

就我而言，如果CDN失败，我将从本地版本加载dataTables CSS和JS-并且由于我希望我的自定义网站CSS覆盖该库，因此我使用'prependTo'以确保dataTables CSS在我的自定义网站CSS之前在文档标题标签中。IE11仍将其“最后”应用或赋予它优先级。在仿真IE10等时确实如此，尽管我不再具有“真实”旧IE版本的测试区域来验证是否始终如此。

您可以确认这是IE中的功能吗？你知道什么时候开始吗？你知道解决办法吗？试图避免在我的CSS文件中出现一堆“！important”。

Answer 1

即使在 Edge 16 上我也看到了完全相同的问题。我不幸的解决方法是通过 JavaScript 手动附加任何 css，而不是在我的 html/页面模板中。

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = '/link/to/style.css';
    document.querySelector('body').appendChild(link);