2017-02-23 12 views
0

reactjs 및 webpack을 사용하여 웹 사이트를 만들었으므로 modernizr을 사용하여 특정 기능에 대한 지원을 표시하지만 Internet Explorer 8 이하에서는 이러한 기능을 지원하지 않습니다. 브라우저. 문제는 웹 사이트를로드 할 때 webpack 및 반응이 지원되지 않으므로 실패합니다. 내 질문에, 어떻게 메시지를 표시 할 수 있습니까? 로드가 반응하기 전에 보여줄 수있는 방법이 있습니까? 아니면 그 메시지에 대해서만 작동하도록하는 방법이 있을까요?은 IE 8을 표시 할 수없고 지원 메시지가 표시되지 않습니다.

도움 주셔서 감사합니다!

답변

3

조건부 주석을 사용하여 특수 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]--> 
+0

이 + "9 GTE 즉"및/또는 "즉 없습니다"조건부 주석 A의 응용 프로그램 JS 포함 다운로드해야합니다. – pawel

+0

그게 실제로 preetey 그게 다른 브라우저 btw이 같은 솔루션입니까? IE는 내 주요 문제이지만 말할 수 있습니다, 거기에 IE X를 말하지 않는 조건을 만드는 방법이 무엇입니까? –

+0

Internet Explorer 10 이상에서는 조건부 주석이 표준 모드에서 더 이상 지원되지 않습니다. 기능 감지 기능을 사용하여 웹 사이트 기능에 대한 효과적인 대체 전략을 제공 할 수 있습니다. 표준 모드에 대한 자세한 내용은 문서 호환성 정의 *를 참조하십시오. 그러나 당신은 IE 9까지 버전에 아무 문제없이 그것을 사용할 수 있습니다. –

0

이를 확인하시기 바랍니다, 나는 브라우저 &를 식별하는 간단한 자바 스크립트를 사용하고있다 그 버전 팝업 메시지가 나타나고 적절한 메시지가 표시됩니다. 버전이 호환되면로드 사이트가 다음은 맘대로 을 진행에서 사용자는 간단한 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>