跨浏览器的图像适合和定位兼容性

Question

我创建了一个 html/javascript/css 页面，该页面在“轮播”中显示照片，用户可以在其中单击左右箭头来更改照片。轮播本身，即父/容器，高 500 像素，宽 100% 的父 div。里面的图像应该是最大 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;

}

Answer 1

尝试添加这个列表，包括歌剧前缀：

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