ウェブサイトとIE11との互換性がありません。

次のスニペットはChromeで正常に動作しますが、IE11またはEdgeでは正しく表示されません。 navbarは、側面に揃えられる代わりに上部に固定され、ホバー効果は機能しません。ウェブサイトとIE11との互換性がありません。

私は宣言しています。 <!DOCTYPE html>は、私はまた、エッジの互換性にそれを強制しようとするために、次の私の<head>を追加しました：

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1">

でもこの表示を行った後、まだめちゃめちゃにされています。私はIEの開発者ツールに入り、そこに問題を見つけることはできません。

マイコード：

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Dashboard</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> 
    <link rel="stylesheet" href="css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="css/layout.css"/> 
    @RenderSection("CustomStyles", false) 
    @RenderSection("CustomScripts", false) 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <div class="container-fluid"> 
     <div class="col-lg-2 col-md-3 col-sm-8 col-xs-6"> 
      <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> 
       <ul class="nav sidebar-nav"> 
        <li class="sidebar-brand"> 
         <a href="/">Dashboard</a> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-home"></i> Directories <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
          <li><a href="#">Item 3</a></li> 
          <li><a href="#">Item 4</a></li> 
          <li><a href="#">Item 5</a></li> 
          <li><a href="#">Item 6</a></li> 
          <li><a href="#">Item 7</a></li> 
          <li><a href="#">Item 8</a></li> 
          <li><a href="#">Item 9</a></li> 
          <li><a href="#">Item 10</a></li> 
         </ul> 
        </li> 
        <li class="dropdown"> 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-fw fa-gbp"></i> Contracts <span class="caret"></span></a> 
         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Item 1</a></li> 
          <li><a href="#">Item 2</a></li> 
          <li><a href="#">Item 3</a></li> 
          <li><a href="#">Item 4</a></li> 
          <li><a href="#">Item 5</a></li> 
          <li><a href="#">Item 6</a></li> 
          <li><a href="#">Item 7</a></li> 
          <li><a href="#">Item 8</a></li> 
          <li><a href="#">Item 9</a></li> 
          <li><a href="#">Item 10</a></li> 
         </ul> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-fw fa-tasks"></i> Processes</a> 
        </li> 
        <li> 
         <a href="#"><i class="fa fa-fw fa-file"></i> Filing </a> 
        </li> 
        <li> 
         <a asp-controller="MyProfile" asp-action="Index"> 
          <i class="fa fa-fw fa-user"></i> My Profile 
         </a> 
        </li> 
       </ul> 
      </nav> 
     </div> 
     <div class="col-lg-10 col-md-9 col-sm-4 col-xs-6"> 
      @RenderBody() 
     </div> 
    </div> 
    <script> 
     $(document).ready(function() { 
      $(".dropdown-toggle").click(function() { 
       $(".caret").removeClass('rotate-180'); 
       $(this).find(".caret").addClass('rotate-180'); 
      }); 
      $(document).mouseup(function (e) { 
       $(".caret").removeClass('rotate-180'); 
      }); 
     }); 
    </script> 
    @RenderSection("Scripts", required: false) 
</body> 
</html>

CSS

body { 
    position: relative; 
    overflow-x: hidden; 
    margin: 0; 
    padding: 0; 
} 

body, html { 
    height: var(--full-height); 
    background-color: var(--bg-color) 
} 

/******************************************** 
/*           * 
/*           * 
/*    Variables     * 
/*           * 
/*           * 
********************************************/ 

:root { 
    /* BACKGROUND COLOUR */ 
    --bg-color: #FFF; 

    /* HIGHLIGHT COLOUR */ 
    --highlight-color: #ff5c16; 

    /* WIDTH */ 
    --width1: 16.67%; 
    --full-width: 100%; 

    /* HEIGHT */ 
    --full-height: 100%; 

    /* Sidebar Font Size*/ 
    --sidebar-fontsize: 16px; 
} 

/******************************************** 
/*           * 
/*           * 
/*    Wrappers     * 
/*           * 
/*           * 
********************************************/ 

.container-fluid { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
} 

/******************************************** 
/*     Header     * 
********************************************/ 

.headerWrapper { 
    height: 7%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

.headerWrapper > h1 { 
    padding: 0; 
    margin: 0; 
    font-size: 18px; 
} 

/******************************************** 
/*     Content     * 
********************************************/ 

.contentWrapper { 
    height: 93%; 
    width: 100%; 
    padding: 0; 
    margin: 0; 
} 

/******************************************** 
/*     Sidebar     * 
********************************************/ 

#sidebar-wrapper { 
    width: var(--width1); 
} 

#sidebar-wrapper { 
    -moz-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    -webkit-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
    background-color: #1A1A1A; 
    height: var(--full-height); 
    overflow-x: hidden; 
    overflow-y: auto; 
    transition: all 0.5s ease; 
} 

#sidebar-wrapper::-webkit-scrollbar { 
    display: none; 
} 

/******************************************** 
/*           * 
/*           * 
/*    Sidebar Styling    * 
/*           * 
/*           * 
********************************************/ 

/*.sidebar-nav { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    top: 0; 
}*/ 

.sidebar-nav .sidebar-brand:before { 
    background-color: #222222; 
    color: #FFF; 
} 

.sidebar-nav .sidebar-brand > a { 
    color: #FFF; 
    font-size: 24px; 
    line-height: 60px; 
} 

.sidebar-nav .sidebar-brand a:hover { 
    background-color: #222222; 
} 

.sidebar-nav > li > a { 
    line-height: 20px; 
    color: #DDD; 
    padding: 10px 15px 10px 30px; 
    font-size: var(--sidebar-fontsize); 
} 

.sidebar-nav > li:before { 
    width: 3px; 
    height: var(--full-height); 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: var(--highlight-color); 
    transition: width .2s ease-in; 
    content: ''; 
} 

.sidebar-nav > li:hover:before { 
    transition: width .2s ease-in; 
    width: var(--full-width); 
} 

.sidebar-nav > li.open:hover before { 
    transition: width .2s ease-in; 
    width: var(--full-width); 
} 

.sidebar-nav .dropdown-menu { 
    background-color: #222222; 
    border-radius: 0; 
    border: none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    width: var(--full-width); 
} 

.sidebar-nav .dropdown-toggle > .caret { 
    float: right; 
    margin: 6px 0; 
} 

.sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, 
.sidebar-nav li.open a:active, .sidebar-nav li.open a:active, .sidebar-nav li.open a:active, 
.sidebar-nav .open > a:hover, .sidebar-nav .open > a:focus { 
    background-color: transparent; 
    color: #FFF; 
    text-decoration: none; 
} 

.nav .open > a { 
    background-color: transparent; 
} 

.nav .open > a:hover, .nav .open > a:focus { 
    background-color: transparent; 
} 

.caret { 
    -moz-transition: transform 0.5s; 
    -webkit-transition: transform 0.5s; 
    transition: transform 0.5s; 
} 

.rotate-180 { 
    transform: rotate(-180deg); 
}

Chromeで働い画像：