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

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%);
}

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

Different center in Chrome and Safari with same CSS code

html

javascript

css

safari

google-chrome