Chrome 和 Safari 中的不同中心具有相同的 CSS 代码

Question

我正在尝试制作一个投资组合网站。该网站已完成，但在不同的浏览器中其结果不同。在 Chrome 中一切正常，但在 Safari 中，事情变得很奇怪。我的英雄文本框和英雄图像图标在 chrome 中居中，在 safari 中居中，无需更改代码。我在下面发布了一些代码和图片。

.hero-text-box {
    position: absolute;
    width: 1140px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.hero-icon-box {
    position: absolute;
    width: 1140px;
    top: 92%;
    left: 50%;
    transform: translate(-50%, -50%);
}

第一张图片是 chrome，第二张是 safari。

Answer 1

为transform 使用-webkit- 前缀

.hero-text-box {
    position: absolute;
    width: 1140px;
    left: 50%;
    top: 50%;
    -webkittransform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.hero-icon-box {
    position: absolute;
    width: 1140px;
    top: 92%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}