IE11 flexbox：影响布局的不透明度

Question

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

https://jsfiddle.net/6L06251k/

以下是小提琴代码的进一步精简版本：

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> 上，那么即使应用了完全相同的样式，外部菜单中的高度也不会发生变化。

对于小提琴，我可以通过使用 0.999 的 opacity 来解决此问题，但此解决方案不适用于我遇到此问题的实际项目。很难说清楚为什么，所以我希望通过了解这个怪癖的潜在机制，我可以找出其他的东西。

Answer 1

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

1. 分析哪个 div 具有display: inline-block 属性，在您的情况下是#submenu。

2. 将font-size: 0 添加到具有display: inline-block 的div 的父div 中，在您的情况下为li。使用font-size: 0，您可以完全消除由字体引起的间距。

3. 下一步也是最后一步是再次将字体大小添加到这些 div 这应该通过添加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>