2016-11-04 6 views
1

Ich benutze reagieren, um eine Webanwendung zu erstellen. Ich habe einen einfacher div-Tag will die Stile Requisiten Flexbox Stil verwenden und wie unterReact Style Requisiten spiegeln sich nicht in IE

<div style={styles.container}>...</div> 

und Stil definieren wie unter

const styles = { 
container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    display: 'flex', 
    flexDirection: 'column', 
}} 

es funktioniert gut in Chrom (v53) und wie unten gemacht html

<div data-reactroot="" 
style="flex: 1 1 0%; justify-content: center; align-items: center; 
background-color: rgb(245, 252, 255); display: flex; flex-direction: column;"> 
.... 
</div> 

während besucht in dh (v11.633) mehrere Stil liegen im hTML nicht gerendert, was der Inhalt des div verursachen nicht richtig angezeigt werden

<div style="display: flex; background-color: rgb(245, 252, 255);" data-reactroot=""> 
... 
</div> 

meine Frage ist, ob reagieren wird den Stil entsprechend dem Browser anwenden? und wie Flexbox Stil korrekt in allen Browsern

---------- -------- Update
Ich habe versucht, in EDGE und Firefox alle rendert den Stil richtig,

+0

Sie brauchen ein Stück. –

+0

[This] (https://github.com/storybooks/react-storybook/issues/213) könnte ebenfalls relevant sein. –

+0

Ich denke, Flex ist keine Option, dh 10 weiß, aber Ihre Meta-Tag-Antwort sollte in Ordnung sein;) – Icepickle

Antwort

1
anzuwenden

schließlich habe ich festgestellt, dass die Render-Engine von IE ausgewählt ist v10 und es wird gut mit Render-Engine v11.so Ich habe versucht, die Render-Engine in IE, unten in der Kopfzeile von HTML hinzugefügt und es ist richtig gerendert (in IE11 nicht in anderer Version versucht)

Ich weiß nicht, warum IE-Engine 10 den Stil nicht richtig macht, aber das löst schließlich mein Problem. Danke allen.

Verwandte Themen