IE11/Edge 不尊重 DOM 中的链接/css 顺序

Posted 2023-03-05

【中文标题】IE11/Edge 不尊重 DOM 中的链接/css 顺序

【英文标题】：IE11/Edge doesn't respect link/css order in DOM

【发布时间】：2017-09-08 22:03:27

【问题描述】：

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”。

【问题讨论】：

我之前发布过类似的东西，但现在找不到详细信息。 CSS 2 规范对此相当模糊。它只是说“按指定的顺序排序：...，指定的后者获胜。”但没有澄清在这种情况下“指定的顺序”是什么意思。 CSS 3 cascading draft 明确表明要使用的顺序是“文档顺序”——即 Chrome 和 Firefox 所做的，但它仍然是一个草稿。

如果它在其他浏览器中有效但在 IE 中无效，则样式规则缺少 ms 前缀或标准规则名称。您应该能够使用任何浏览器的 DOM Explorer 选项卡来应用规则以及它们如何级联到所选元素。请参阅 caniuse.com 以了解浏览器中的 css 规则支持... IE 和 edge 无法识别外观规则。 （-webkit-appearance、-moz-appearance、-k-appearance。）请提供您的问题的复制网址。

@RobParsons 抱歉，这与它无关。当 css 文件在我的页面加载核心 CSS 之前位于 html 中时，它可以正常工作，但是当我必须在页面加载后使用 javascript 添加它时，即使我插入 CSS 文件，它也会被视为最后一个应用/给定的首选项我的核心 CSS 之前的 DOM - IE 将上次加载视为首选项，而不是像 FF 和 Chrome 那样的 DOM 中的顺序/我所期望的。

IE 中的 DOM 浏览器工具是否显示已应用来自注入样式表的任何规则？在调用 window.onload 事件之前尝试在主体块底部的脚本块中注入。

@RobParsons 如果您阅读我的问题，它将解释您需要知道的一切。 IE 优先考虑通过 javascript 加载的 CSS 文件，即使我在 DOM 中的其他 CSS 文件之前加载它。因此，与其他浏览器不同，优先于最后加载而不是在 DOM 中排序。

【参考方案1】：

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

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