跨浏览器的图像匹配和定位兼容性

我已经创建了一个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上确认。 –

跨浏览器的图像匹配和定位兼容性

回答

相关问题