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

【问题标题】：IE 11, Flexbox, and Absolute Positioning Not WorkingIE 11、Flexbox 和绝对定位不起作用
【发布时间】：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 显示子菜单右对齐。

标签： html css internet-explorer flexbox


【解决方案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

【讨论】：

【解决方案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/

【讨论】：

    猜你喜欢
    • 1970-01-01
    • 2018-09-12
    • 1970-01-01
    • 1970-01-01
    • 2018-12-15
    • 2014-04-03
    • 1970-01-01
    • 2018-06-26
    • 2019-03-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode