爲什麼在Safari上轉換轉換不能正常工作？

我經常用這個代碼視圖居中div：爲什麼在Safari上轉換轉換不能正常工作？

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
}

它在Firefox，IE瀏覽器和Chrome的偉大工程，但不是在Safari。

什麼是在Safari瀏覽器中居中圖像的解決方法？

來源

2015-04-25 NineCattoRules

您需要另一個供應商前綴樣式。

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
}

請參閱下文，瞭解哪個瀏覽器支持哪些內容以及需要添加什麼前綴。 http://caniuse.com/#feat=transforms2d

來源

2015-04-25 12:13:13

這麼容易:)謝謝 – NineCattoRules

答案很好，但一個修改就完美了：*前綴版本應該在前綴版本*之前。換句話說，將W3C標準屬性放在供應商前綴屬性後面。這就是爲什麼這很重要：http://stackoverflow.com/q/7080605/3597276 –

同意..我已經更新了答案。謝謝。 –

以下是我在所有經過測試的瀏覽器和移動設備（Chrome，IE，Firefox，Safari，iPad，iphone 5和6，Android）上的作品。

的Safari瀏覽器（包括iOS設備）的關鍵是要添加其他變換CSS規則，而不僅僅是：

transform: translateY(-50%);

您需要添加到它這組規則：

-ms-transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-o-transform: translateY(-50%);

下面是我的一些工作代碼：

img.ui-li-thumb { 
    position: absolute; 
    left: 1px; 
    top: 50%; 

    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

來源

2015-05-14 18:52:27

哦，這是美麗的。只有'-webkit-transform：translateY（-50％）'是不夠的，'但是你還需要其他供應商。做得好的蘋果，超級設計工作。謝幕。 – rory

@rory這些不同的前綴用於支持某些版本的Internet Explorer（-ms），firefox（-moz）和opera（-o）。 -webkit前綴用於webkit瀏覽器（chrome和safari）。所以這絕對不只是蘋果的事情。這是一個標準的事情。 –

在某些情況下，你將不得不使用：

-webkit-transform: translate3d(-50%,-50%,0);

有時移動瀏覽器的效果會更好。

來源

2016-10-03 19:52:00 Iggy

爲什麼在Safari上轉換轉換不能正常工作？

回答

相關問題