IE11 flexbox：レイアウトに影響を与える不透明度

Question

私はナビゲーションバーにフレックスボックスレイアウトを採用していますが、Internet Explorer 11では奇妙な動作に気付きました.Fromや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ではなく、なぜこのようなことが起こるべきなのかわかりません！

また、RULE Bを使用してサブメニューの不透明度を変更し、外側にフォーカスするようにタブすると、同じスタイルが適用されていても外側メニューの高さの変更は発生しません。

私は、opacity 0.999を使用してこれを解決できましたが、この解決策はこの問題が発生した実際のプロジェクトでは機能しません。理由を説明するのは簡単ではないので、私は、このクルックの根本的な仕組みを理解することで、何か他のものを見つけ出すことができると期待しています。

Answer 1

display: inline-blockを使用しているときに、このような不規則なスペーシング動作が発生することがあります。この問題を解決するには、単に以下の

1. は、あなたの場合には、それは#submenuだ、display: inline-block属性を持つdivの分析行うことができます。

2. display: inline-blockを持つdivの親divにfont-size: 0を追加します。あなたの場合は、liです。 font-size: 0を使用すると、フォントのスペースが完全に削除されます。

3. 次と最後のステップは、あなたのケースbuttonには、font-size: initialを追加することによって、いくつかのテキストを表示する必要があり、これらのdiv に再びフォントサイズを追加することです。

更新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>