IE11 flexbox：不透明度影响布局

Question

我一直在为导航栏采用 flexbox 布局，我注意到 Internet Explorer 11 中有一个奇怪的行为。在 Chrome、FF 或 Edge 中不会发生。我做了一个 fiddle 来演示：

以下是 fiddle 代码的进一步精简版本：

HTML

<form>
  <ul>
    <li>
      <button>Menu item</button>
      <ul id="submenu"><li><button>Submenu item</button></li></ul>
    </li>
  </ul>
</form>

CSS

form {
  display: flex;
  flex-flow: column;
}

button {
  display: inline-block;
}

#submenu {
  display: inline-block;
  position: absolute;
  opacity: 0.5;
}

li:hover #submenu {
  opacity: 1; /* RULE A */
}

button:focus + #submenu {
  opacity: 1; /* RULE B */
}

问题是当我将鼠标悬停在外部菜单 <ul> 上时，触发规则 A 并将子菜单的 opacity 从 0.5 更改为 1，外部菜单的高度增加了几个像素.如果悬停规则将不透明度设置为 0.999，则不会发生这种情况。我不明白为什么元素的不透明度会影响它的布局，也不明白为什么只有当不透明度变为 1 而不是 0.999 时才会发生这种情况！

此外，如果我改为使用规则 B 更改子菜单的不透明度，通过按 Tab 键将焦点放在外部 <button>，则外部菜单中的高度不会发生变化，即使样式完全相同正在应用中。

对于 fiddle，我可以通过使用 0.999 的 opacity 来解决这个问题，但是这个解决方案不适用于我遇到这个问题的实际项目。很难说出原因，所以我希望通过了解这个怪癖的潜在机制，我可以想出一些其他的东西。

Answer 1

当您使用 display: inline-block 时，可能会出现这种奇怪的间距行为。要解决此问题，您只需执行以下操作

分析哪个 div 具有 display: inline-block 属性，在您的情况下是 #submenu.
将 font-size: 0 添加到具有 display: inline-block 的 div 的父 div，在您的例子中是 li。使用 font-size: 0 可以完全删除由字体引起的间距。
下一步也是最后一步是再次将字体大小添加到那些 divs 这应该通过添加 font-size: initial 来显示一些文本，在你的例子中是 button.

更新后的 CSS 代码现在看起来像这样

form {
  display: flex;
  flex-flow: column;
}
ul {
  background: #aaf;
  list-style: none
}
li {
  font-size: 0;
}
button {
  background: #afa;
  font-size: initial;
}
#submenu {
  display: inline-block;
  opacity: 0;
}
li:hover #submenu {
  opacity: 1;
}

<form>
  <ul>
    <li>
      <button>Menu item</button>
      <ul id="submenu">
        <li>
          <button>Submenu item</button>
        </li>
      </ul>
    </li>
  </ul>
</form>

IE11 flexbox：不透明度影响布局

IE11 flexbox: opacity affecting layout

html

css

flexbox

internet-explorer-11