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

Question

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

这是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; 
}

这里是 class 样式应用于 html 的示例（我正在使用 Bootstrap .card-columns class 进行分组图片):

<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 编辑，我认为问题可能与转换 and/or 显示值在 Microsoft Edge 中的运行方式有关，但我不确定并且在这一点上我的编码深度还很远。有谁知道为什么它不起作用 and/or 对如何修复它有任何建议吗？

Answer 1

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

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

此外，您的宽度和高度都为 100%，因此无需进行转换。你可以只拥有：

top: 0;
left: 0;

并且没有转换。

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

Positioning Hoverable Card Captions on Microsoft Edge

html

css

css-transforms

microsoft-edge