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

我一直在为导航栏使用flexbox布局，我注意到InternetExplorer11中有一个奇怪的行为。不会发生在铬合金、FF或Edge中。我做了一把小提琴来演示：

以下是进一步简化的小提琴代码：

HTML

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

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

此外，如果我改为使用规则B更改子菜单的不透明度，通过选项卡将焦点放在外部

，则外部菜单中的高度更改不会发生，即使应用了完全相同的样式

---

对于fiddle，我可以通过使用0.999的

不透明度来解决这个问题，但是这个解决方案不适用于我遇到这个问题的实际项目。要说出原因并不容易，因此我希望通过理解这种怪癖的基本机制，我可以找出其他的一些东西。
当您使用
显示：内联块时，可能会出现这种奇怪的间距行为。要解决此问题，只需执行以下操作

分析哪个div具有
display:inline block
属性，在您的例子中，它是
#子菜单

将
font size:0
添加到具有
display:inline block
的div的父div中，在您的示例中是
li
。使用
font-size:0
可以完全删除字体造成的间距

下一步也是最后一步是将字体大小再次添加到这些div中
它应该通过添加
字体大小：initial
来显示一些文本，在您的例子中是
按钮

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


表单{
显示器：flex；
柔性流动：柱；
}
保险商实验室{
背景：#aaf；
列表样式：无
}
李{
字号：0；
}
钮扣{
背景：#afa；
字号：首字母；
}
#子菜单{
显示：内联块；
不透明度：0；
}
li：悬停#子菜单{
不透明度：1；
}



菜单项


子菜单项




太好了，谢谢-这在我的主要项目中都起到了作用。关于为什么会发生这种情况，你有什么信息或资源吗？我猜这不是现代浏览器中不会发生的事情吧？对我来说，不透明度是一种非常奇怪的行为，它受哪个选择器触发CSS更改的影响尤其奇怪。@JosephO'Donnell很棒，没问题。很高兴我能帮上忙。内联块的问题是div之间的空白在屏幕上变得可见。因为这是内联块的行为方式，所以实际上不管浏览器有多现代化。其他浏览器正确地显示了它，这确实很有趣。有时你甚至不会注意到空白，但在你的例子中，你注意到它是因为悬停时导航高度的变化。稍后，如果你不想处理这些空白问题，你可以用flex做任何事情。David Walsh写了一篇关于这个主题的文章，甚至指出了更多解决空白问题的方法，但我认为在你的情况下，字体大小方法是最好的。我以前遇到过这篇文章中讨论的情况，我不确定这里到底发生了什么！如果元素的不透明度为0.999，则不会出现这种行为，而内联块空白通常不会出现这种情况。而且，即使我删除了@JosephO'Donnell中HTML中的所有空白，问题仍然存在。啊，是的，你完全正确，我的错。这确实不是因为空格。问题在于，在Internet Explorer中加载页面时，这两个按钮的高度不同。如果将div#子菜单的不透明度设置为1，则可以看到这一点。如果仔细观察，您可以通过#子菜单按钮看到，与第一个按钮相比，底部有一个与ul重叠的边框。但是如果你现在将不透明度设置为小于1，你就看不到底部的边框了。现在，当你悬停时，不透明度变为1，边框再次出现。
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 */
}