Размещение заголовков карты Hoverable в Microsoft Edge - PullRequest
Новая
       93

Размещение заголовков карты Hoverable в Microsoft Edge

0 голосов
/ 21 октября 2019

Я тестировал свой веб-сайт портфолио (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,но я не уверен, и на данный момент я довольно далеко от моей глубины кодирования. Кто-нибудь знает, почему это не работает, и / или есть какие-либо советы о том, как это исправить?

1 Ответ

1 голос
/ 21 октября 2019

Я полагаю, что вы столкнулись с этой ошибкой -> https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/107210

Просто добавьте overflow: hidden; к .card-columns .card, чтобы обойти это.

Кроме того, нет необходимости в преобразованиикак у вас ширина и высота на 100%. Вы можете просто иметь: 

top: 0;
left: 0;

и без преобразования.

...