IE11中外联CSS文件加载不稳定，如何解决？

从你描述的现象（强制刷新后恢复）来看，核心问题大概率是IE11的缓存机制导致的，结合你的代码，给出以下几种可行的解决方法：

• 给CSS文件添加缓存破折标识
  在CSS的href属性末尾追加版本号、时间戳或者文件哈希值，让IE11识别为新资源，避免读取旧缓存。比如：

  <link rel="stylesheet" type="text/css" href="path/to/CSS?v=1.0.1" />
  

  如果你用的是JSF项目，也可以通过EL表达式动态生成标识，比如绑定后端的版本号变量，或者利用构建工具（如Maven、Gradle）自动给文件名添加哈希后缀，从根源上避免缓存冲突。

• 修正link标签的MIME类型大小写
  你当前代码里的type="text/CSS"使用了大写后缀，标准的CSS MIME类型是text/css（全小写）。虽然多数浏览器兼容，但IE11对这类规范细节更敏感，修正后可能解决加载异常：

  <link rel="stylesheet" type="text/css" href="path/to/CSS" />
  

• 调整资源加载顺序
  你当前是先加载JS文件再引入CSS，IE11的资源加载队列可能出现阻塞，导致CSS加载优先级被压低。把link标签移到script标签之前，让CSS优先加载：

  <link rel="stylesheet" type="text/css" href="path/to/CSS" />
  <script type="text/javascript" src="path/to/css/css-min.js"></script>
  

• 添加JS兜底加载逻辑
  如果以上方法仍有问题，可以用JS检测CSS是否加载成功，失败则重新请求：

  function ensureCSSLoaded() {
    var cssLink = document.querySelector('link[rel="stylesheet"]');
    var loaded = false;
    // 适配IE11的加载检测方式
    if (cssLink.styleSheet) {
      try {
        if (cssLink.styleSheet.cssText) loaded = true;
      } catch(e) {}
    } else if (cssLink.sheet) {
      loaded = true;
    }
    if (!loaded) {
      var newLink = document.createElement('link');
      newLink.rel = 'stylesheet';
      newLink.type = 'text/css';
      // 追加时间戳强制绕过缓存
      newLink.href = cssLink.href + '?t=' + Date.now();
      document.head.appendChild(newLink);
    }
  }
  // 页面加载完成后执行检测
  window.addEventListener('load', ensureCSSLoaded);
  

  将这段代码放到页面底部或者现有JS文件的末尾即可。

• 调整服务器缓存策略
  针对IE11配置更严格的缓存规则，比如在服务器端给CSS文件设置Cache-Control: no-cache, must-revalidate响应头，或者缩短缓存过期时间，让IE11不会长时间保留旧的CSS缓存副本。具体配置方式取决于你使用的服务器（如Tomcat、Nginx等）。

内容的提问来源于stack exchange，提问作者Lakshmi TS