2016-11-04 2 views
1

Я использую реакцию на создание веб-приложения. У меня есть простой DIV тег хочет использовать стиль Flexbox и установить реквизит стиля, как показано нижеРеквизиты стиля React не отражаются в IE

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

и стиль определяет как ниже

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

он отлично работает в хроме (V53) и оказал, как показано ниже 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> 

в то время как побывал в ИЭ (v11.633) несколько стиля не отображается в HTML, которые вызывают содержание в DIV не отображаются должным образом

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

Вопрос в том, будет ли реагировать стиль в соответствии с браузером? и как правильно применять стиль Flexbox во всех браузерах

---------- обновление --------
Я пытался в EDGE и Firefox все будет корректно отображать стиль,

+0

Вам нужен шив. –

+0

[Это] (https://github.com/storybooks/react-storybook/issues/213) также может иметь значение. –

+0

Я думаю, что flex не является вариантом, то есть 10 знает, но ответ на ваш метатег должен быть хорошим;) – Icepickle

ответ

1

Наконец-то я заметил, что движок рендеринга, выбранный IE, - это v10, и он отлично работает с движком рендеринга v11.so. Я попытался изменить движок рендеринга в IE, добавленный ниже в заголовке html, и он отображается правильно (в IE11 нет опробованный в другой версии)

<meta http-equiv="X-UA-Compatible" content="IE=edge"> 

Не знаю, почему двигатель IE 10 не отображает стиль правильно, но, наконец, это решает мою проблему. Спасибо всем.

Смежные вопросы