我的标题菜单在IE9中很奇怪

Question

你好，我是Jan，我有一个问题。

我正在为我的客户编写一个网站，但我无法获得适用于Internet Explorer 9的标题菜单可以帮助我吗？

#header_img {
  background-image: url(https://www.hsjaa.com/images/joomlart/demo/default.jpg);
  background-size: cover;
  margin: 0px;
  height: 50vw;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header_menu {
  text-align: center;
  position: absolute;
  position: fixed;
  top: 6%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  width: 95%;
  background-color: #c0392b;
  font-size: 16px;
  margin-left: auto;
  margin-right: auto;
  z-index: 99999;
  text-align: left;
  padding: 8px;
  border-radius: 8px;
  height: 50px;
  box-shadow: 4px 4px 15px black;
  -moz-box-shadow: 4px 4px 15px black;
  -webkit-box-shadow: 4px 4px 15px black;
}

#header_menu ul {
  position: fixed;
}

#header_menu ul {
  margin: 0;
  padding: 0px 0;
  list-style: none;
  height: auto;
  margin-top: 12px;
}

#header_menu li {
  display: inline;
  padding: 8px;
}

#header_menu a {
  font-size: 20px;
  color: #FFF;
  padding: 10px;
  text-decoration: none;
  border-radius: 15px;
}

#header_menu a:hover {
  background-color: #e74c3c;
  color: #FFF;
  border-radius: 8px;
}

#header_btn .see_more {
  Position: absolute;
  top: 85%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #c0392b;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 15px;
  font-size: 32px;
}

<link rel="Stylesheet" type="text/css" href="styles/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-          awesome/4.7.0/css/font-awesome.min.css">

<!-- header section -->
<!-- header image -->
<div id="header_img">
  <!-- header button -->
  <div id="header_btn">

    <a rel="button" class="see_more" href="#verder">Kom Verder   <i class="fa fa-chevron-circle-down"></i></a>

  </div>
  <!-- the menu -->
  <div id="header_menu">
    <ul>
      <li><a href="#header_img">Home</a></li>
      <li><a href="#verzekeringen ">Verzekeringen</a></li>
      <li><a href="#service_link">Service</a></li>
      <li><a href="#schade">Schade</a></li>
      <li><a href="#fotoalbum">Fotoalbum</a></li>
      <li><a href="#over_ons">Over ons</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

</div>

它只在Internet Explorer 9和Microsoft边缘出错 这就是它在Chrome中的样子：

这就是它在IE9中的样子：

任何人都可以帮助我吗？