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

标签 html css internet-explorer flexbox

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

Chrome

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

Internet Explorer 11

请注意，在 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>

最佳答案

问题似乎是 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 元素的布局方向。默认设置是 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

关于html - IE 11、Flexbox 和绝对定位不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37995819/

上一篇：html - 了解 z-index : How does this element appear in front of its parent's sibling?

下一篇：javascript - 主要浏览器上 WebCL 实现的当前状态是什么？

相关文章：

jquery - Jquery更改方法的问题

javascript - 通过动态键访问对象未定义错误

javascript - 选择一个以某些内容结尾的 div

HTML TextArea 适合内容(在页面加载时)

css - 自动添加换行符使句子的线条宽度相似

jquery - 事件类不受 Bootstrap 管理

css - 具有持久边框的 Html 可滚动 div，紧紧包围可见的滚动内容大小

javascript - 在 Internet Explorer 9 和 Opera 下，在 Canvas 中加载图像失败

javascript - IE 中选择列表的 jQuery 代码不起作用

Facebook - IE7 上的权限对话框

©2024 IT工具网  联系我们