javascript - IE11/Edge 不遵守 DOM 中的链接/CSS 顺序

Question

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

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

我有一个加载 JS 库的函数(如果 cdn 失败，则在本地)，这包括一行到 'appendTo' 或 'prependTo' 的 'head' 元素(传入 'method')。

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

问题是核心网站样式可能会覆盖库样式，所以我认为“prependTo”“head”可以确保核心样式覆盖库 - 这在 Firefox 和 Chrome 中确实有效。但在 IE 中，库样式仍然覆盖，就好像 CSS 文件在 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);