Microsoft Edge Bug mit Silbentrennung und Flexbox

Question

Dieser Code zeigt zwei Div-Container. Auf dem Div mit der ID a ist display: flex; eingestellt. Bei beiden haben wir die Silbentrennung mit -ms-hyphens: auto; aktiviert. Aber in IE oder Edge funktioniert die Silbentrennung nur auf dem div, ohne dass die Flexbox angehängt ist. Wie erwartet funktioniert es in Chrome und Firefox gut.

div { 
 
    max-width: 100px; 
 
    background: red; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
    margin-bottom: 10px; 
 
} 
 
#a { 
 
    display: flex; 
 
}

<article> 
 
    <div id="a" lang="en"> 
 
    Incomprehensibilities 
 
    </div> 
 

 
    <div id="b" lang="en"> 
 
    Incomprehensibilities 
 
    </div> 
 
</article>

https://codepen.io/anon/pen/jmGxJZ

Hat jemand eine Lösung?

Answer 1

Ich habe endlich eine Antwort gefunden.

Nach https://css-tricks.com/almanac/properties/h/hyphenate/

Die Bindestriche Eigenschaft steuert hyphenation von Text in Blockebene Elemente.

Sie sagen explizit block level elements. Also habe ich mich entschieden, keine flexbox zu verwenden, da dies kein Element auf Blockebene ist, danke @LGSon.

Um den Text sowohl zentriert als auch mit Bindestrich versehen zu haben, verwendete ich die Methode https://css-tricks.com/centering-css-complete-guide/, um ein Blocklevelelement vertikal zu zentrieren. Zusätzlich nach http://caniuse.com/#feat=css-hyphens Chrome unter Windows unterstützt keine Silbentrennung. Also habe ich word-break: break-all; nur für Chrome mit einem Media Query Hack von hier https://stackoverflow.com/a/13587388/4558231 verwendet. Schließlich funktioniert es für Chrome, FF und Safari auf MAC OSX. Auch für Edge und IE11 unter Windows.

Sie können mein Ergebnis auf https://codepen.io/bierik/pen/mmBjqQ