Apple Safari 中的 ReactJS 断线

Question

我的 <div className={`${classes.center} ${classes.or}`}>OR</div> 有问题。看来这只是 Apple Safari 上的问题。那里的右线似乎断了。它适用于 Google Chrome 和其他浏览器。我正在使用 Safari 版本 12

请检查这个 CodeSandbox link click here

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    transform: "translate(-70%, -50%)"
  },
  "&:after": {
    transform: "translate(70%, -50%)"
  }
}

Answer 1

css transform 导致了这里的问题。而不是使用 left: 0 表示 before 和 right: 0 表示 after，它应该可以正常工作。它将确保两个伪元素都粘在各自的末端，并且由于它们具有相同的宽度，UI 将自动调整。

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    left: 0
  },
  "&:after": {
    right: 0
  }
}

修复沙箱 link：https://codesandbox.io/s/login-forked-4cbvm?file=/src/index.js

希望对您有所帮助。还原任何 doubts/clarifications.

Apple Safari 中的 ReactJS 断线

ReactJS Broken Line in Apple Safari

css

reactjs

material-ui

jss