Internet Explorer hover/rgba/opacity/CSS3 совместимость

Я с помощью CSS3 с помощью формата RGBA Альфа-прозрачность при наведении отображать текст поверх изображения при наведении.

Прекрасно работает в chrome, firefox и safari, но при попытке в internet explorer (9) он просто показывает изображение и наведение курсора ничего не делает.

Проверьте код здесь:

Http://jsfiddle.net/b16pow50/ 

div {
  position: absolute;
  top: 0px;
  left: 0px;
  display: table;
  width: 600px;
  height: 396px;
  text-align: center;
  background: #000;
}
span {
  display: table-cell;
  vertical-align: middle;
  background: rgba(255, 255, 255, 0.72);
  visibility: hidden;
  opacity: 0;
  color: #000;
}
div:hover span {
  visibility: visible;
  opacity: 1;
  text-align: right;
}
<div>
  <span>
    <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
      <tr>
        <td width="20%" rowspan="5">&nbsp;</td>
        <td width="60%">- 0</td>
        <td width="20%" rowspan="5" align="right">
          <a href="#" target="frame">
            <img src="http://placehold.it/71x50/f00" alt=" " width="71" height="50" border="0">
          </a>
        </td>
      </tr>
      <tr>
        <td>- 1</td>
      </tr>
      <tr>
        <td>- 2</td>
      </tr>
      <tr>
        <td>- 3</td>
      </tr>
      <tr>
        <td>- 4</td>
      </tr>
    </table>
  </span>
</div>
1 2
css3 internet-explorer-9 hover rgba

1 ответ:

Демонстрационная версия работает в Internet Explorer 9. Проблема может заключаться в том, что вы просматриваете страницу в более старом режиме документа, что уменьшает поддержку таких вещей, как :hover на несвязанных элементах и rgba цвет.

Нажмите клавишу F12, чтобы открыть инструменты разработчика и оттуда проверить режим документа. Кроме того, можно также записать значение document.documentMode в выходные данные консоли. Вы должны ожидать, что Internet Explorer 9 будет находиться в режиме документа IE 9, в отличие от чего-то ранее.

Введите описание изображения здесь

Убедитесь, что ваш документ загружается в стандартном режиме, чтобы начать с (который в IE 9 является 9 режим документа), запустите документ с помощью HTML5 doctype: 

<!DOCTYPE html>

Ничто не должно предшествовать этому в вашем документе.

С этого момента строго придерживайтесь спецификации HTML. В качестве примера одного отклонения от спецификации вы помещаете table в span. Тот самый <span> элемент предназначен для удержания только формулировка содержания, например:<a>, <strong>, <em>, и т.д.

1