跨瀏覽器的圖像匹配和定位兼容性

我已經創建了一個html/javascript/css頁面，用於在「傳送帶」中顯示照片，用戶可以在其中單擊左右箭頭更改照片。旋轉木馬本身，父母/容器，高度爲500px，其父母div寬度爲100％。它內部的圖像應該在最大100％寬和最大100％高。換句話說，無論長寬比如何，它都會適合imgCarousel。跨瀏覽器的圖像匹配和定位兼容性

這適用於大多數瀏覽器。我已經確認它可以在IE，Edge，Chrome和Firefox中使用。但是，它在Safari中不起作用。我個人不能訪問Mac，但我知道它在Safari中不起作用，因爲其他人瀏覽了我之前的頁面。它也不適用於某些Android移動瀏覽器（儘管它可以與Android Chrome一起使用）。

看來，在這些瀏覽器無法正常工作的情況下，頂端並未真正設置爲50％，而是轉換仍然正常工作。這是基於視覺檢查。另外，看起來圖像尺寸不合適。它延伸到全寬，並且高度延伸超過100％;

不幸的是，我無法使用這些瀏覽器上的開發人員工具進行測試，因爲我無法訪問Mac，也無法找到可用於相同功能的移動瀏覽器的開發人員工具。

如果這裏沒有違反協議，我可以鏈接到相關頁面。

我已經做了一些研究，看看是否有任何兼容性問題/修復，但我在這項研究中沒有取得成功。如果有人知道我可以包含兼容性修補程序，請告訴我。

謝謝。

.imgCarousel { 
    display: flex; 
    justify-content: space-between; 

    vertical-align: middle; 

    height: 500px; 
    background-color: black; 
    text-align: center; 
    margin: auto; 
} 

.imgCarousel img { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 

    max-height: 100%; 
    max-width: 100%; 
    object-fit: contain; 

    cursor: pointer; 

}

來源

2017-07-08 Brandon Dixon

你能張貼轉盤中的jsfiddle，CodePen，一個片段演示？或者只是一個鏈接到網站？ –

你可以在你的windows系統上安裝safari。 –

您可能會錯過這些瀏覽器的'transform'屬性的瀏覽器前綴。 –

嘗試加入這個名單，其中包括歌劇前綴：

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

來源

2017-07-08 03:43:01

謝謝。我做了調整。不幸的是，它並沒有解決問題（至少在手機上），但是儘管如此，包含在代碼中還是很不錯的。我無法在Safari上確認。 –

跨瀏覽器的圖像匹配和定位兼容性

回答

相關問題