使用 JavaScript 为 IE11 及更低版本提供替代方案 CSS？

Question

Whosebug 上有很多关于如何检测 IE11 的，但我不确定如何在 JavaScript 条件语句中使用它.

我正在使用 Tailwind CSS，但它不支持 IE11 及以下版本。我想要一种至少通过替代 CSS 文件提供某种布局的方法。

我如何用 JavaScript 做这样的事情？

if (IE11) {
    <link rel="stylesheet" href="/css/ie11.css">
  } else if (IE10) {
     <link rel="stylesheet" href="/css/ie10.css">
  } else if (IE9) {
    <link rel="stylesheet" href="/css/ie9.css">
  } else if (IE8) { {
    <link rel="stylesheet" href="/css/ie8.css">
  } else {
    <link rel="stylesheet" href="/css/tailwind.css">
  }
}

我很欣赏 IE11 的全球使用率非常低，但我希望能够使用 Tailwind CSS 并在需要时提供支持旧版浏览器的选项。

Answer 1

可以通过window.document.documentMode判断当前浏览器是否为IE。然后动态导入资源到页面。

简单代码：

<script>
        var ieVersion = window.document.documentMode;
        if (ieVersion != 'undefined' & ieVersion > 7 && ieVersion < 12) {
            console.log('Load in IE ' + ieVersion);
            importJsResource(ieVersion);
        } else {
            console.log('Not in IE 8-11..');
            ieVersion = "tailwind";
            importJsResource(ieVersion);
        }

        function importJsResource(version) {
            var fileref = document.createElement("link");
            fileref.rel = "stylesheet";
            fileref.type = "text/css";
            if (ieVersion == 'tailwind') {
                fileref.href = "/Content/tailwind.css";
            } else {
                fileref.href = "/Content/ie" + version + ".css";
            }
            document.getElementsByTagName("head")[0].appendChild(fileref);
        }
    </script>

使用 JavaScript 为 IE11 及更低版本提供替代方案 CSS？

Serve alternative CSS for IE11 and below using JavaScript?

javascript

internet-explorer-11