无法显示 IE 8 及以下不支持消息答案

【问题标题】：cannot display IE 8 and down no support message无法显示 IE 8 及以下不支持消息
【发布时间】：2017-07-13 17:31:27
【问题描述】：

我使用 reactjs 和 webpack 创建了一个网站，我正在使用 modernizr 来显示对特定功能的支持，但我想在 IE 8 及以下版本中显示我不支持这些浏览器的消息。问题是加载网站时，由于 webpack 和 react 不支持它而失败。我的问题是，我怎样才能显示消息？有没有办法在反应加载之前显示它？或者也许有办法让它只为那个消息工作？

感谢您的帮助！

【问题讨论】：

标签： reactjs webpack modernizr

【解决方案1】：

您可以使用条件 cmets 加载特殊的 CSS 并仅在 IE8 中打印 HTML。

http://www.quirksmode.org/css/condcom.html

例子：

<!--[if lte IE 8]>
<p class="unsupported-ie">This page is not supported for IE8 and lower versions of IE.</p>
<![endif]-->

你甚至可以在<head>中加载CSS：

<!--[if lte IE 8]>
<link media="all" rel="stylesheet" href="/unsupported-ie.css" />
<![endif]-->

【讨论】：

+ 将应用程序 JS 包含在“gte ie 9”和/或“not ie”条件注释中，因此甚至不必下载。
这实际上很不错，顺便说一句，其他浏览器是否有类似的解决方案？ IE 是我的主要问题，但可以说，有没有办法制作一个没有专门说 IE X 的条件？
我不这么认为，即使是较新的IE也不支持（来自官方文档：从Internet Explorer 10开始，标准模式不再支持条件cmets。使用特征检测提供针对浏览器不支持的网站功能的有效后备策略。有关标准模式的更多信息，请参阅定义文档兼容性。）。但是你可以在 IE 9 之前毫无问题地使用它。
我明白了，您是否知道在我的 webpack 之前检测功能并响应负载的另一种方法？如果加载了 webpack，我可以使用 modernizr 库，但在此之前我不能“要求”或“导入”任何东西..
我能给你的最好建议是为所有现代和常见的浏览器编写通用的应用程序 :-) 你的开发人员的生活会更轻松、更快乐 :-) 尝试检测客户端的浏览器并使其适合页面是通往维护地狱的好方法，结果不确定。

【解决方案2】：

请检查一下，我已经使用简单的 Java 脚本来识别浏览器及其版本。将出现一个弹出消息并给出适当的消息 - 如果版本兼容，则加载站点，否则阻止用户继续进行 - 下面是简单的 HTML 页面：-

<!DOCTYPE html>
<html>
<head>
   <style>
               .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
       }

        /* Modal Content */
       .modal-content {
            background-color: #fefefe;
            margin: auto;
           padding: 20px;
           border: 1px solid #888;
           width: 80%;
       }

       /* The Close Button */
          .close {
               color: #aaaaaa;
               float: right;
               font-size: 28px;
               font-weight: bold;
              }

             .close:hover,
             .close:focus {
              color: #000;
              text-decoration: none;
               cursor: pointer;
           }
    </style>
</head>
<body onload="IEValidationMessage();">

   <!-- this is the DIV used for showing message box -->
    <div id="myModal" class="modal">
        <div id="closeBtn" class="modal-content">
            <span class="close">&times;</span>
           <div id="divMessagebody"></div>
        </div>
    </div>

    <script>
        // When the user clicks on <span> (x), close the modal
        var modal = document.getElementById('myModal');
        var span = document.getElementById("closeBtn");
            span.onclick = function () {
            modal.style.display = "none";
        }
       // When the user clicks anywhere outside of the modal, close it
          window.onclick = function (event) {
           if (event.target == modal) {
            modal.style.display = "none";
          }
      }
       function IEValidationMessage() {
           modal.style.display = "block";
           if (document.documentMode < 9) {
              document.getElementById("divMessagebody").innerHTML = "Please Use IE 9 or Above.)";
          }
          else {
             document.getElementById("divMessagebody").innerHTML = "congrats Site is compatible in this IE version ";
         }
         if (document.documentMode ==undefined) {
             document.getElementById("divMessagebody").innerHTML = "Please use IE9 or higher only.   ";
         }
     }

  </script>

   </body>

【讨论】：