Chrome和Safari中使用相同CSS代碼的不同中心

Question

我正在嘗試製作一個投資組合網站。該網站已完成，但其結果在不同的瀏覽器中有所不同。在Chrome中，一切都很完美，但在Safari中會變得很奇怪。我的英雄文本框和英雄圖片圖標集中在鉻中間，在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%); 
} 

第一個圖像是鉻第二個safari。

Answer 1

使用-webkit-前綴transform

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