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

原文 标签 javascript html css internet-explorer dom

IE11/Edge doesn't respect link/css order in DOM

tl;dr: IE11/Edge seems to give priority to styles in CSS files loaded last with javascript rather than how they appear in the DOM structure.

I cannot find anyone else who has reported this problem, but am looking for help confirming my issue.

I have a function for loading JS libraries (locally if the cdn fails) and this includes a line to either 'appendTo' or 'prependTo' the 'head' element (passes in 'method').

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

The issue is that core website style may override library styles, so I thought 'prependTo' the 'head' would work to ensure the core styles override the library - this does work in Firefox & Chrome. But in IE the library styles are still overriding as though the CSS file was after the core files in the DOM even through inspecting the DOM shows that it is before.

In my case, I am loading dataTables CSS & JS from local versions if the CDN fails - and since I want my custom website CSS to override the library, I am using 'prependTo' to make sure the dataTables CSS is before my custom website CSS in the document head tag. IE11 still applies it 'last' or gives it preference. It's true when emulating IE10 etc. though I no longer have a test area for 'real' old IE versions to verify if this was always true.

Can you confirm this is the functionality in IE? Do you know when this started? Do you know a fix? Trying to avoid a bunch of "!important" in my CSS files.

Answer

I'm seeing the exact same problem even on Edge 16. My unfortunate work around is to manually attach any css via JavaScript instead of in my html/page template.

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

翻译

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”。
最佳答案
我什至在Edge 16上也看到了完全相同的问题。不幸的是,解决方法是通过JavaScript而不是在html / page模板中手动附加任何CSS。



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

javascript - 如何检查Dom元素或React组件

javascript - React Router V4无法在构建中运行

javascript - Web2py无法滚动到页面底部

javascript - 在标记集群组中使用Leaflet实时层

javascript - 函数内部的Angular 2 ngModel

javascript - 拖放多个浏览器窗口/选项卡

javascript - React Router v4.0-重定向到Router作用域之外的页面

javascript - 动态访问JavaScript数组

javascript - 测试套件无法运行TypeError:无法读取未定义的属性“ bind”

javascript - Expo XDE无法运行应用程序引发找不到隧道打包程序