IE11에서 부트 스트랩 4 네비게이션이 올바르게 렌더링되지 않습니다.

Question

디자인 스펙으로 구축 한 부트 스트랩 4 반응 형 네비게이션이 있습니다.

파이어 폭스, 크롬, 마이크로 소프트 에지 및 오페라에서 올바르게 표시됩니다.

편집 : 그것은 11 참조 이미지 아래에 IE에서 정말 렌더링 그러나

: 아래 이미지 참조 내가 자신을 네비게이션 바의 DIV를 제거 할 때 내가 발견, 그것은에 괜찮 았는데 IE11, 나는 내 형태로 가지고있는 구조의 네비게이션 바에 넣어 때 문제가있는, 그래서 ....

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> 
 

 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="navbar navbar-light navbar-expand-md fixed-top" role="navigation"> 
 
    <div class="container"> 
 
     <a class="navbar-brand" href="#">logo here</a> 
 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#loginNavbar" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
 
         <span class="navbar-toggler-icon"></span> 
 
        </button> 
 

 
     <div class="navbar-collapse collapse" id="loginNavbar"> 
 
     <nav class="nav ml-auto login-nav-right"> 
 

 
      <form method="post" role="form" class="login-form" action="#"> 
 
      <div class="row"> 
 
       <div class="col-lg-5 col-sm-5 px-2"> 
 
       <input class="form-control mr-sm-2" type="text" placeholder="Email" aria-label="Email" data-val="true" data-val-email="The Email field is not a valid e-mail address." id="Email" name="Email" value=""> 
 
       </div> 
 

 
       <div class="col-lg-5 col-sm-5 px-2"> 
 
       <input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password" id="Password" name="Password"> 
 
       <a href="#" class="btn forgot-pass">Forgot Password</a> 
 
       </div> 
 

 
       <div class="col-lg-2 col-sm-2 px-2"> 
 
       <button class="btn default-btn align-right" type="submit" value="log in">log in</button> 
 
       </div> 
 
      </div> 
 
      </form> 
 
     </nav> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

본문 태그 바로 전에 페이지의 맨 아래로 스크립트를 이동하십시오.

CSS 링크의 순서를 변경하고 자신의 CSS를 제외한 나머지 부분 이후에 부트 스트랩을 넣으십시오.

편집 : 브라우저 업데이트 문제 일 수도 있습니다. 시크릿 모드로 열어 보거나 브라우저 기록을 삭제 해보세요. ie11 내 스 니펫을 열었습니다. 그리고 그것은 정상적으로 작동하는 것 같습니다. 페이지에 대한 링크가 있습니까?