javascript - 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

添加几个 height: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 {
	padding: 0;
	background: #fff;
	height: 70px;
}

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

.navbar .navbar-nav .nav-item {
	display: table-cell;
	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;
	padding: 0;
  margin: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;
}

<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>