Question

我一直在不同的浏览器上测试我的投资组合网站（http://www.meades.org/Hazel-Portfolio/）。该网站的登录页面专门用于图像特定的标题，以便每当鼠标悬停在图像上方时，该图像就会淡入并模糊原始图像。到目前为止，它似乎可以在我测试过的所有浏览器上运行，但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; 
}

这是该类样式应用于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

只需将fwrite($sheetFilePointer, '<sheetViews><sheetView showRowColHeaders="1" showGridLines="true" workbookViewId="0" tabSelected="1">' .'<pane state="frozen" activePane="bottomLeft" topLeftCell="A2" ySplit="1"/>' .'<selection sqref="A1" activeCell="A1" pane="bottomLeft"/></sheetView></sheetViews>');添加到overflow: hidden;即可解决此问题。

此外，由于宽度和高度均为100％，因此无需进行转换。您可以拥有：

.card-columns .card

并且没有变换。

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

1 个答案: