IE11 flexbox: Opazität beeinflusst Layout

Question

Ich habe ein Flexbox-Layout für eine Navigationsleiste verwendet, und ich habe ein seltsames Verhalten in Internet Explorer 11 bemerkt. Nicht in Chrome, FF oder Edge passieren. Ich habe eine Geige gemacht zu demonstrieren:

https://jsfiddle.net/6L06251k/

Es folgt eine weitere abgespeckte Version des Codes Geige:

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 */ 
} 

Das Problem ist, dass, wenn ich über das äußere Menü <ul> schwinge, REGEL A auslöst und das opacity des Untermenüs von 0,5 auf 1 ändert, erhöht sich die Höhe des äußeren Menüs um einige Pixel. Dies geschieht nicht, wenn die Hover-Regel die Deckkraft auf beispielsweise 0,999 festlegt. Ich verstehe nicht, warum die Deckkraft eines Elements sein Layout beeinflussen sollte und warum dies nicht nur passieren sollte, wenn die Deckkraft 1 wird, aber nicht 0.999!

Wenn ich stattdessen die Deckkraft des Untermenüs mit REGEL B ändere, indem ich den Fokus auf die äußere <button> setze, tritt die Höhenänderung im äußeren Menü nicht auf, obwohl der exakt gleiche Stil angewendet wird.

Für die Geige, konnte ich dies lösen, indem Sie einfach eine opacity von 0,999, aber diese Lösung funktioniert nicht für das eigentliche Projekt, in dem ich dieses Problem aufgetreten ist. Es ist nicht leicht zu sagen, warum, also hoffe ich, dass ich durch das Verständnis des zugrundeliegenden Mechanismus dieser Eigenart etwas anderes herausfinden kann.

Answer 1

Wenn Sie display: inline-block verwenden, kann ein seltsames Abstandsverhalten auftreten. Um dieses Problem zu beheben, können Sie einfach die folgenden Schritte aus

1. Analysieren Sie die div hat das display: inline-block Attribut, in Ihrem Fall ist es #submenu.

2. Fügen Sie font-size: 0 dem übergeordneten div des div hinzu, das die display: inline-block hat, in Ihrem Fall die li. Mit font-size: 0 entfernen Sie den von der Schriftart verursachten Abstand vollständig.

3. nächste und letzte Schritt ist die Schriftgröße erneut auf diese divs hinzufügen , die durch Hinzufügen font-size: initial einen Text angezeigt werden soll, die button in Ihrem Fall.

Der CSS-Code aktualisiert würde jetzt so etwas wie dieses

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>