Question

考虑这个JSBin example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Case</title>
  <!-- red -->
  <link rel="stylesheet" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpyZWR9" />
  <!-- blue -->
  <link title="a" rel="alternate stylesheet" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpibHVlfQ==" />
  <!-- green -->
  <link title="b" rel="deferred" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpncmVlbn0=" />
</head>
<body>
  <script>
    window.onload = function() {
      var elem = document.querySelector("link[rel=deferred]");
      var parent = elem.parentNode;
      parent.removeChild(elem);
      elem.rel = "alternate stylesheet";
      parent.appendChild(elem);
    }
  </script>
</body>
</html>

运行示例，在Firefox和Chrome中，页面背景为红色。在IE11中运行，背景为绿色。

任何人都可以了解为什么IE11将页面样式化为添加的样式表，即使它仅被标记为备用样式？

更新：

进一步的调查表明，只有在重新使用link元素时才会发生这种情况。创建一个新的链接元素很好，所以在IE中，当rel属性发生变化时，元素上的“alternate”标志不会被更新。

Answer 1

rel="deferred"不是valid link type，因此IE会忽略它并加载base 64引用。通过将其设置为rel="alternate stylesheet"，浏览器仍会在页面加载时请求资源，但不会呈现它。

似乎你试图推迟加载CSS资源，然后（一旦它加载）阻止浏览器呈现它？值得一读Ilya Grigorik的Debunking Responsive CSS Performance Myths，看看这些技术并不总是像你希望的那样有效。

使用脚本在IE11中添加备用样式表

1 个答案: