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

Question

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

感谢您的帮助！

Answer 1

您可以使用条件注释加载特殊 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]-->

Answer 2

请检查这个，我使用了简单的 Java 脚本来识别浏览器 & 并且它的 version.A 弹出消息将出现并给出适当的消息 - 如果版本兼容则加载站点，否则停止用户继续前进- 下面是简单的 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>

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

cannot display IE 8 and down no support message

modernizr

reactjs

webpack