Question

我正在使用react来构建一个Web应用程序。我有一个简单的div标签想要使用flexbox样式并设置如下面的样式道具

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

和样式定义如下

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

它在chrome（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>

访问ie（v11.633）时，几个样式不会在html中呈现，这会导致div中的内容无法正常显示

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

我的问题是反应是否会根据浏览器应用样式？以及如何在浏览器中正确应用flexbox样式

----------更新--------
我尝试在EDGE和Firefox中都会正确渲染样式，

Answer 1

最后我注意到IE选择的渲染引擎是v10，它可以正常使用渲染引擎v11.so我尝试在IE中更改渲染引擎，在html的标题下面添加并正确渲染（在IE11未尝试其他版本）

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

不知道为什么IE引擎10不能正确渲染样式，但最终这解决了我的问题。谢谢大家。

React Style道具不反映在IE中

1 个答案: