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

Posted 2023-03-05

技术标签:

【中文标题】IE 11、Flexbox 和绝对定位不起作用【英文标题】：IE 11, Flexbox, and Absolute Positioning Not Working 【发布时间】：2016-10-26 00:51:25 【问题描述】：

这就是 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>

【问题讨论】：

你是否使用了所有相关的 IE flexbox 变体语法 - caniuse.com/#feat=flexbox @Paulie_D 我对 flexbox 所做的唯一事情是 display: flex;（及其变体）。 HTML 正在使用默认的 flexbox 设置呈现。如果***链接 1 处于活动状态，子菜单的外观如何？这很奇怪。除了right:0 值之外，一切正常 @Pangloss 看起来不错。我想要它，以便***链接 1 到 3 显示子菜单左对齐（因为它适合这样），而***链接 4 和 5 显示子菜单右对齐。 【参考方案1】：

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

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

在流行的浏览器兼容性网站caniuse.com 上，IE11 曾经有一个用于 flexbox 的完整绿色徽章。这意味着 IE11 提供全面支持。不过最近IE11被降级为淡绿色，表示部分支持，due to a large amount of bugs present。

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

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

flex-direction 属性决定了弹性项目的布局方向。默认设置为flex-direction: row。使用row-reverse（和column-reverse），main-start 和 main-end 方向互换。

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

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

要解决该问题，您可以颠倒源中链接的顺序，或使用flex order property 仅颠倒屏幕上的顺序：

.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 中测试）：

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;
  flex-direction: row-reverse;                   /* NEW */


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


.submenu-4 > li:nth-child(1)  order: 5 ;         /* NEW */
.submenu-4 > li:nth-child(2)  order: 4 ;         /* NEW */
.submenu-4 > li:nth-child(3)  order: 3 ;         /* NEW */
.submenu-4 > li:nth-child(4)  order: 2 ;         /* NEW */
.submenu-4 > li:nth-child(5)  order: 1 ;         /* NEW */

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

jsFiddle

【讨论】：

我也看到了这个错误。令人惊讶的是，github.com/philipwalton/flexbugs中似乎没有讨论它请注意，有人在developer.microsoft.com/en-us/microsoft-edge/platform/issues/… 报告了 IE11 和 flexbox 的问题，而微软表示他们不会修复 IE11 的问题【参考方案2】：

虽然我非常赞成采用 Flexbox，而且我在最近的所有项目中都这样做，但它似乎在您的代码中并没有发挥重要作用。考虑到这一点，您应该知道，如果您从 CSS 中删除display: flex 及其变体并将white-space: nowrap 添加到.submenu，则可以更轻松、更易于维护地解决此特定问题。

这样您就不必处理重新排序子菜单项的问题，如果项目数量发生变化，这可能会成为问题。

有一天，当 IE11 不再是问题时，您可以回到原来的代码。

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;
  /* removed flexbox */
  white-space: nowrap; /* new */


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

https://jsfiddle.net/rddo2gr4/

【讨论】：

以上是关于IE 11、Flexbox 和绝对定位不起作用的主要内容，如果未能解决你的问题，请参考以下文章

具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度

IE11上表格单元格内绝对位置的奇怪行为

Flexbox 居中在 IE 11 中不起作用

在 Chome 与 FF 和 IE 中没有顶部/底部的 Flexbox 和绝对位置 [重复]

绝对定位的弹性项目不会从 IE11 中的正常流程中删除

Mpdf，块绝对定位不起作用