IE 11,Flexbox和绝对定位不起作用

Question

这就是Chrome在Windows 10中呈现我的HTML的方式:

这就是Internet Explorer 11在Windows 10中呈现我的HTML的方式:

请注意,在Chrome中,您可以看到所有子菜单链接,但在Internet Explorer 11中则无法看到.我该怎么做才能使它在Internet Explorer 11中运行？

这是我的代码:

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-width: 1280px;
}

a {
  color: #000;
  text-decoration: none;
}

a.active {
  color: #f00;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  display: inline-block;
}

.menu > li {
  position: relative;
  font-size: 18px;
}

.menu > li + li {
  margin-left: 100px;
}

.submenu {
  position: absolute;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.submenu-4,
.submenu-5 {
  right: 0;
}

.submenu li {
  font-size: 14px;
  white-space: nowrap;
}

.submenu > li + li {
  margin-left: 25px;
}

a:not(.active) + ul {
  display: none;
}

<nav>
  <ul class="menu">
    <li>
      <a href="#">Top Level Link 1</a>
      <ul class="submenu submenu-1">
        <li><a href="#">Submenu 1 Link 1</a></li>
        <li><a href="#">Submenu 1 Link 2</a></li>
        <li><a href="#">Submenu 1 Link 3</a></li>
        <li><a href="#">Submenu 1 Link 4</a></li>
        <li><a href="#">Submenu 1 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 2</a>
      <ul class="submenu submenu-2">
        <li><a href="#">Submenu 2 Link 1</a></li>
        <li><a href="#">Submenu 2 Link 2</a></li>
        <li><a href="#">Submenu 2 Link 3</a></li>
        <li><a href="#">Submenu 2 Link 4</a></li>
        <li><a href="#">Submenu 2 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 3</a>
      <ul class="submenu submenu-3">
        <li><a href="#">Submenu 3 Link 1</a></li>
        <li><a href="#">Submenu 3 Link 2</a></li>
        <li><a href="#">Submenu 3 Link 3</a></li>
        <li><a href="#">Submenu 3 Link 4</a></li>
        <li><a href="#">Submenu 3 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#" class="active">Top Level Link 4</a>
      <ul class="submenu submenu-4">
        <li><a href="#">Submenu 4 Link 1</a></li>
        <li><a href="#">Submenu 4 Link 2</a></li>
        <li><a href="#">Submenu 4 Link 3</a></li>
        <li><a href="#">Submenu 4 Link 4</a></li>
        <li><a href="#">Submenu 4 Link 5</a></li>
      </ul>
    </li>
    <li>
      <a href="#">Top Level Link 5</a>
      <ul class="submenu submenu-5">
        <li><a href="#">Submenu 5 Link 1</a></li>
        <li><a href="#">Submenu 5 Link 2</a></li>
        <li><a href="#">Submenu 5 Link 3</a></li>
        <li><a href="#">Submenu 5 Link 4</a></li>
        <li><a href="#">Submenu 5 Link 5</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

问题似乎是 IE11 无法识别right: 0应用于绝对定位的 Flex 容器 ( .submenu) 的偏移量。

考虑到该布局在 Chrome 和 Firefox 中有效，该问题可能是 IE11 中的错误，这并不奇怪。

在流行的浏览器兼容性网站caniuse.com上，IE11 曾经有一个完整的 Flexbox 绿色徽章。这意味着 IE11 提供了全面支持。然而最近，由于存在大量错误，IE11被降级为浅绿色，这意味着部分支持。

这是一个简单的解决方法：

.submenu {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;  /* <-- ADD THIS */
}

该flex-direction属性决定了弹性项目的布局方向。默认设置为flex-direction: row。使用row-reverse（和column-reverse），主起始和主结束方向交换。

这解决了 IE11 中的问题，而不会破坏其他浏览器中的任何内容。

但是，它确实会颠倒所有浏览器中链接的顺序。

要解决该问题，您可以反转源中链接的顺序，或使用flexorder属性仅反转屏幕上的顺序：

.submenu-4 > li:nth-child(1) { order: 5 ; }
.submenu-4 > li:nth-child(2) { order: 4 ; }
.submenu-4 > li:nth-child(3) { order: 3 ; }
.submenu-4 > li:nth-child(4) { order: 2 ; }
.submenu-4 > li:nth-child(5) { order: 1 ; }

完整代码（在 Firefox、Chrome 和 IE11 中测试）：

.submenu {
  position: absolute;
  display: flex;
  flex-direction: row-reverse;  /* <-- ADD THIS */
}

.submenu-4 > li:nth-child(1) { order: 5 ; }
.submenu-4 > li:nth-child(2) { order: 4 ; }
.submenu-4 > li:nth-child(3) { order: 3 ; }
.submenu-4 > li:nth-child(4) { order: 2 ; }
.submenu-4 > li:nth-child(5) { order: 1 ; }

jsFiddle