Bootstrap下拉菜單在Microsoft Edge上無法按預期工作

Question

此下拉菜單在Chrome，Firefox和IE上運行良好。在Microsoft Edge上，顯示下拉菜單，但低於應顯示的位置，並且還將漢堡包圖標從默認位置移開。我不知道它會是什麼，如果有人知道，我會很感激。

這裏的JSFiddle

$('.dropdown').hover(
 
    function() { 
 
     $(this).find('.dropdown-menu-nav').show(); 
 
    }, 
 
    function() { 
 
     $(this).find('.dropdown-menu-nav').hide(); 
 
    } 
 
);

.header-menu { 
 
    padding: 0; 
 
    background: #fff; 
 
} 
 

 
.navbar .navbar-nav { 
 
    width: 100%; 
 
    display: table; 
 
} 
 

 
.navbar .navbar-nav .nav-item { 
 
    display: table-cell; 
 
    height: 70px; 
 
    vertical-align: middle; 
 
    border: 1px solid #000; 
 
} 
 

 
.navbar .navbar-nav .nav-link { 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    padding: 0; 
 
    color: #E90020; 
 
    font-size: 14px; 
 
    font-weight: 700; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    background: grey; 
 
} 
 

 
.navbar .navbar-nav .nav-item:first-child .nav-link:before { 
 
    content: "\f0c9"; 
 
    font-family: FontAwesome; 
 
    margin-right: 0; 
 
    font-size: 22px; 
 
    line-height: initial; 
 
    color: #fff; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 20px; 
 
    transform: translateY(-50%); 
 
} 
 

 
.todas-as-categorias-span { 
 
    display: block; 
 
} 
 

 
.dropdown-menu-nav { 
 
    width: 100px; 
 
    margin: 0; 
 
    padding: 0; 
 
    text-align: center; 
 
    color: #000; 
 
    border-width: 0 3px 3px 3px; 
 
    border-color: #f9b414; 
 
    border-style: solid; 
 
    border-radius: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar header-menu"> 
 
    <ul class="navbar-nav"> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 1 
 
     <span class="todas-as-categorias-span">Categorias</span> 
 
     </a> 
 
     <div class="dropdown-menu dropdown-menu-nav"></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 2</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 3</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 4</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 5</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"></div> 
 
     </li> 
 
    </ul> 
 
    </nav>

Answer 1

增加一些高度：100％，移動導航高度外DIV解決了這個問題。

https://jsfiddle.net/9zt1gLLL/1/

$('.dropdown').hover(
 
    function() { 
 
     $(this).find('.dropdown-menu-nav').show(); 
 
    }, 
 
    function() { 
 
     $(this).find('.dropdown-menu-nav').hide(); 
 
    } 
 
);

.header-menu { 
 
\t padding: 0; 
 
\t background: #fff; 
 
\t height: 70px; 
 
} 
 

 
.navbar .navbar-nav { 
 
    width: 100%; 
 
    height:100%; 
 
    display: table; 
 
} 
 

 
.navbar .navbar-nav .nav-item { 
 
\t display: table-cell; 
 
\t vertical-align: middle; 
 
    border: 1px solid #000; 
 
    height:100%; 
 
} 
 

 
.navbar .navbar-nav .nav-link { 
 
    display: flex; 
 
    height:100%; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
\t padding: 0; 
 
    margin:0; 
 
\t color: #E90020; 
 
\t font-size: 14px; 
 
\t font-weight: 700; 
 
\t text-transform: uppercase; 
 
\t text-align: center; 
 
    background: grey; 
 
} 
 

 

 
.navbar .navbar-nav .nav-item:first-child .nav-link:before { 
 
\t content: "\f0c9"; 
 
\t font-family: FontAwesome; 
 
\t margin-right: 0; 
 
\t font-size: 22px; 
 
\t line-height: initial; 
 
\t color: #fff; 
 
\t position: absolute; 
 
\t top: 50%; 
 
\t left: 20px; 
 
\t transform: translateY(-50%); 
 
} 
 

 
.todas-as-categorias-span { 
 
\t display: block; 
 
} 
 

 
.dropdown-menu-nav { 
 
\t width: 100px; 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t text-align: center; 
 
\t color: #000; 
 
\t border-width: 0 3px 3px 3px; 
 
\t border-color: #f9b414; 
 
\t border-style: solid; 
 
\t border-radius: 0; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar header-menu"> 
 
    <ul class="navbar-nav"> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 1 
 
     <span class="todas-as-categorias-span">Categorias</span> 
 
     </a> 
 
     <div class="dropdown-menu dropdown-menu-nav"><ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     </ul></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 2</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"><ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     </ul></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 3</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"><ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     </ul></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 4</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"> 
 
     <ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     </ul></div> 
 
     </li> 
 
     <li class="nav-item dropdown dropdown-nav"> 
 
     <a class="nav-link" href="#">Item 5</a> 
 
     <div class="dropdown-menu dropdown-menu-nav"><ul> 
 
     <li>one</li> 
 
     <li>two</li> 
 
     <li>three</li> 
 
     <li>four</li> 
 
     </ul></div> 
 
     </li> 
 
    </ul> 
 
    </nav>