Question

在我看来，所有现代浏览器，包括最近版本的Chrome，Safari和FireFox（可能从一开始）都尊重style中link和head元素的顺序;即使是动态创建并在运行时使用JavaScript添加。

例如，此处red.css和green.css都指定了正文背景颜色;第一个将身体背景设置为红色，第二个设置为绿色：

<head>
    <!-- other code -->
    <link rel="stylesheet" href="red.css" type="text/css">
    <link rel="stylesheet" href="green.css" type="text/css">
</head>

结果是身体的背景颜色为绿色，因为green.css放在red.css之后，然后进行评估。

即使动态创建link元素并将其插入头部，元素的排序也会成立。例如，动态创建加载link的{{1}}元素只会在green.css之后插入主体背景颜色为绿色。

然而，唯一不尊重这一点的浏览器是Internet Explorer（至少IE 7-9没有）。看来，对于IE，最近添加的red.css或link元素是在已经评估过的所有内容上进行评估的;它在运行时添加时不遵守树顺序。

是否尊重订单非标准行为，或者这是Internet Explorer的错误？如何为Internet Explorer修复此问题？

我提出的一个想法（可行）是动态删除所有现有的style和link元素，然后按照相同的树顺序添加它们 - 这就是我希望它们的顺序待评估。

非常感谢任何见解。

更新

以下是根据要求提供的更详细的代码示例：

style

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="red.css" type="text/css">  </head> <body> <script type="text/javascript"> setTimeout(function() { // IE7-8 does not support referencing document.head var head = document.getElementsByTagName("head")[0]; var link = document.createElement("link"); link.setAttribute("href", "green.css"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); // All modern browesers will leave the background // color red, except IE will set it green. head.insertBefore(link, head.firstChild); // Now comment out the above line and try adding the link // using this instead. All modern browsers (including IE) // will set the body background color green after two seconds. // IE seems to always evaluate the last dynamically added link. // head.appendChild(link); }, 2000); </script> </body> </html>的内容：

red.css

body { background-color: red; }的内容：

green.css

Answer 1

如果不是重新添加样式表，而是要切换他们强制重新渲染的属性，该怎么办？例如，您可以尝试迭代所有link / style元素，将其media属性设置为none，然后将其重新设置为原始元素。

Answer 2

您没有告诉我们您通过插入样式表确实要解决的问题的详细信息，但很可能有更好的方法来解决实际问题而不是动态插入特定样式表在列表中排序。

例如，您可以使用两个样式表（略微修改以关闭另一个类）并通过向<body>标记添加或删除单个类，您可以触发从绿色变为红色或副变化/反之亦然。

Answer 3

您所指的是CASCADING - CASCADING样式表（CSS）工作方式的一个非常重要的功能。所有浏览器都以这种方式工作，包括IE。如果他们没有级联，那将是一个主要问题。

然而，有些样式在IE的某些版本中不起作用 - 也许你正在看的是样式不能正常工作，而不是级联不正常。您想发布一个具体的例子吗？

HEAD中LINK和STYLE元素的评估顺序

3 个答案: