左：css 的 auto 属性在 Internet Explorer 中不起作用答案

【问题标题】：left: auto property of css does not work in Internet Explorer左：css 的 auto 属性在 Internet Explorer 中不起作用
【发布时间】：2019-08-31 09:34:12
【问题描述】：

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

在 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，即树形表的阶梯效果。

我尝试的另一件事是：-

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

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

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

由于项目很大，我很难创建一个小提琴。如果你想玩，我已经创建了一个沙盒 - https://codesandbox.io/s/react-jss-playground-mr4p6

我的观察是该属性 - left: auto 在 IE11 中不受支持

【问题讨论】：

标签： css reactjs jss

【解决方案1】：

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

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

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

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

【讨论】：