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

时间：2016-06-23 15:24:10

标签： html css css3 internet-explorer flexbox

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

Chrome

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

Internet Explorer 11

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

这是我的代码：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：2)

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

考虑到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）可以交换主开始和主要方向。

这解决了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

答案 1 :(得分：1)

虽然我非常赞成采用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/

相关问题
最新问题