Chrome与Safari浏览器CSS元素定位不一致问题求助

使用styled-components编写CSS时，Chrome与Safari浏览器中类名为behind的元素定位表现不一致，Safari显示符合预期。核心问题在于绝对定位元素依赖margin进行定位，不同浏览器对该场景下的margin解析逻辑存在差异，再结合flex父容器的布局规则，进一步放大了兼容性问题。

优化后的代码方案 #

const HomeZeroStyles = styled.div`
  width: 100%;
  height: 85vh;
  display: flex;
  flex-direction: row;

  .left-content1 {
    width: 55%;
    height: 100%;
    min-width: 55%;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .behind1 {
    min-width: 75%;
    min-height: 35%;
    outline: 1px solid var(--pall4);
    margin-top: 0;
    margin-right: 40%;
    margin-left: 5%;
  }
  .behind2 {
    min-width: 70%;
    min-height: 30%;
    z-index: 10;
    position: absolute;
    bottom: 10%;
    left: 40%;
    background-color: var(--pall4);
  }
  .behind3 {
    min-width: 75%;
    min-height: 20%;
    z-index: 100;
    position: absolute;
    background-color: #881337;
    top: 10%;
    left: 25%;
    &:hover {
      background-color: #fde68a;
    }
  }
  .meow {
    width: 90%;
    height: 30vh;
    z-index: 999;
    position: absolute;
    color: black;
    font-size: 12rem;
    filter: invert(1);
    mix-blend-mode: difference;
    padding-left: 1vh;
    left: 10%;
  }
  .right-content1 {
    width: 45%;
    height: 100%;
    overflow: hidden;
    position: relative;
    z-index: 999;
  }
  .kitty2 {
    margin-top: 10vh;
    left: 0;
    position: relative;
  }
`;

关键优化点 #

• 替换margin定位为绝对定位属性：给.behind2、.behind3、.meow改用top/bottom/left属性定位，避免不同浏览器对绝对定位元素margin解析的差异。绝对定位元素的margin行为并非标准统一的定位方式，使用专属定位属性更可靠。
• 稳定父容器尺寸：给.left-content1同时设置固定width/height和min-width/min-height，确保子元素的百分比定位有明确的基准，避免flex布局下尺寸计算波动导致的偏移。
• 明确元素定位规则：给.kitty2添加position: relative，避免默认静态定位下left属性无效的问题。

内容的提问来源于stack exchange，提问作者erratinsilentio