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改变子菜单的不透明度，通过标签将焦点集中在外部<button>上，即使应用完全相同的样式，外部菜单中的高度更改也不会发生。

对于小提琴，我可以通过使用0.999的opacity来解决此问题，但此解决方案对于我遇到此问题的实际项目不起作用。要说明原因并不容易，所以我希望通过理解这个怪癖的基本机制，我可以找出其他的东西。

Answer 1

当您使用display: inline-block时，可能会出现如此奇怪的间距行为。要解决这个问题，你可以简单地做以下

1. 分析其格有display: inline-block属性，你的情况是#submenu。

2. 将font-size: 0添加到div的父div，其中display: inline-block，在您的情况下，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>