Question

我正在使用带有rgba alpha不透明悬停的CSS3，以便在用户悬停时在图像上显示文字。

在chrome，firefox和safari中运行良好但是在尝试使用Internet Explorer（9）时它只显示图像并且悬停不起作用。

点击此处的代码：

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>

Answer 1

该演示可在Internet Explorer 9中运行。问题可能是您正在以较旧的文档模式查看页面，从而减少了对非链接元素:hover等内容的支持，以及rgba颜色。

按F12打开开发人员工具，然后从那里检查文档模式。或者，您也可以将document.documentMode的值记录到控制台输出中。您应该期望Internet Explorer 9处于IE 9的文档模式，而不是之前的版本。

enter image description here

确保文档在标准模式下加载（在IE 9中是 9 文档模式），使用HTML5 doctype启动文档：

<!DOCTYPE html>

在您的文档中，此前不应该有任何内容。

从那时起，密切关注HTML Specification。作为与规范的一个偏差的示例，您将table放在span中。 <span> element旨在仅包含短语内容，例如<a>，<strong>，<em>等。

Internet Explorer悬停/ rgba / opacity / css3兼容性

1 个答案: