鍍金池/ 問答/HTML/ oppo R7不支持transform:translateX(-50%)，前綴都

oppo R7不支持transform:translateX(-50%)，前綴都帶了，沒用？

如題，fixed定位的div，top:50%,left:50%,transform:translate(-50%,-50%),其他手機(jī)，都好的，oppo R7居然不居中，是不支持translate？

回答
編輯回答
不歸路

加了webkit都不行嗎？知道高度和寬度的用margin-top，bottom 負(fù)寬高的一半，不知道的話用js margin-top，bottom 負(fù)offsetHeight offsetWidth 的一半

2018年4月1日 16:13
編輯回答
薄荷綠

如果是特定手機(jī)不能居中定位的話，那可能就是兼容性問題了，或者換一種布局方式，移動端可以用flex布局，也很容易實(shí)現(xiàn)居中。要不就是識別手機(jī)，用js控制，如果是R7，就單獨(dú)處理。不過先要確定是兼容性問題還是其他意外情況

2018年2月21日 23:29
編輯回答
夢一場

我覺得并不是 R7 不支持 translateX。不信你可以寫一個純粹的居中單例然后在 R7 上看，我能說 100% 是沒問題的。

大膽猜測你的問題是 js 調(diào)用彈層后出現(xiàn)的彈窗不居中。解決方案（hack）可以考慮使用 translate3d(-50%, -50%, 0) 代替 translate(-50%, -50%)。

另一個思路是，給彈窗添加一個蒙層，蒙層用 fixed 定位，彈窗用 absolute 定位，然后代碼照舊。如下：

/*蒙層*/
.alert {
    position: fixed; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
}
/* 窗口 */
.alert_box {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%)
}
2017年11月2日 23:36
編輯回答
大濕胸

手機(jī)出現(xiàn)特殊兼容的問題 沒有代碼看不好判斷
首先考慮是transform:translate(-50%,-50%),加多一個-webkit-transform:translate(-50%,-50%),有些情況下可能連里面的translate都要寫上-webkit-；
實(shí)在不行 現(xiàn)在手機(jī)都兼容flex的，你加多一個外部容器flxed left:0,top,0充滿屏幕 然后里面的元素用flex來居中試試

2017年9月26日 00:21