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>