html - 在 Microsoft Edge 上定位可悬停的卡片标题

Question

我一直在不同的浏览器上测试我的投资组合网站 ( http://www.meades.org/Hazel-Portfolio/ )。网站登陆页面专为特定图像的标题而设计，当鼠标悬停在图像上时，该标题会淡入并遮盖原始图像。到目前为止，它似乎适用于我测试过的所有浏览器，Microsoft Edge 除外。出于某种原因，蓝色标题 block 在底部被截断并插入到下一张图片的顶部，我不明白为什么。

这是我应用到图像以获得效果的 CSS:

.index-caption {
 background-color: #75bff0;
 color: black;
 font-size: 16px;
 padding-top: 25%;
 opacity: 0;
 transition: .5s ease;
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 transform: translate(-50%, -50%);
 text-align: center;
 display: inline-block;
}

.index-caption:hover {
 opacity: 1; 
} 

下面是该类样式应用于 html 的示例(我正在使用 Bootstrap .card-columns 类对图像进行分组):

<div class="card">
   <a href="EMP.html">
    <img size="100%" height="100%" class="card-img-top" src="images/emp.png" alt="Ethnomusicology Major Project">
     <div class="index-caption">
        <h2>The Ideology of the Modern Concert Hall</h2>
        <br>
        <h4>Last updated: 5/10/19</h4>
      </div>
     </a>
 </div>

我已经进行了一些试错 CSS 编辑，我认为问题可能与 Microsoft Edge 中的转换和/或显示值的操作方式有关，但我不确定并且远远超出了我的编码深度在此刻。有谁知道为什么它不起作用和/或对如何修复它有任何建议？

Answer 1

我相信你已经遇到了这个错误 -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210

只需将 overflow: hidden; 添加到 .card-columns .card 即可解决此问题。

此外，不需要转换，因为您的宽度和高度都为 100%。你可以:

top: 0;
left: 0;

并且没有转换。