左：css 的自动属性在 Internet Explorer 中不起作用

Question

我在 react.js 应用程序中有一个组件 - 树 table。

在 chrome 或除 IE 之外的任何其他浏览器中看起来像这样 - https://imgur.com/pRDAAeZ

但是，在 IE11 中 - 相同的 jss 属性使其看起来像 -https://imgur.com/Dd7j9sh

复选框的代码片段：-

"&$mainRoot":{
"& $root": {
        left: "auto",
        paddingLeft: "0.25rem",
        paddingRight: "0.75rem",

        "&>div": {
          top: "-0.0625rem"
        }
      }
}

我尝试了什么？

"&$mainRoot":{
"& $root": {
        left: "0rem",
        position: "absolute",
        paddingLeft: "0.25rem",
        paddingRight: "0.75rem",

        "&>div": {
          top: "-0.0625rem"
        }
      }
}

左侧和位置的变化 - 使其看起来像 - https://imgur.com/wAIqplH

位置是正确的，但是实际看起来应该是这样的- https://imgur.com/pRDAAeZ即树的阶梯状效果table.

我尝试的另一件事是：-

将位置更改为 "relative" 并添加属性宽度：“100%” 使其看起来像 - https://imgur.com/awsNAPc - 因此，给我阶梯 -类似效果 - 但是，无法将其移动到左侧的更多位置：“0rem”

"&$mainRoot":{
"& $root": {
        left: "0rem",
        position: "relative",
        width: "100%",
        paddingLeft: "0.25rem",
        paddingRight: "0.75rem",

        "&>div": {
          top: "-0.0625rem"
        }
      }
}

由于项目比较大，制作起来比较困难fiddle。如果你想玩，我已经创建了一个沙盒 - https://codesandbox.io/s/react-jss-playground-mr4p6

我的观察是属性 - 左：IE11 不支持自动

Answer 1

这里的问题是：auto 属性仅在 IE11 中不起作用。它在所有其他浏览器中运行良好。

    root:{
    child1: {
     position: absolute;
     }
    child2: {
     left: auto;
     position: relative;
      }
    }

将 position: absolute 添加到相邻 child 使其在所有浏览器中都能正常工作。

如果大家还有什么要补充的，欢迎补充。

左：css 的自动属性在 Internet Explorer 中不起作用

left: auto property of css does not work in Internet Explorer

css

reactjs

jss

左：css 的自动 属性 在 Internet Explorer 中不起作用

left: auto property of css does not work in Internet Explorer

css

reactjs

jss

左：css 的自动属性在 Internet Explorer 中不起作用