Internet Explorer hover/rgba/opacity/css3 兼容性

Question

我正在使用 CSS3 和 rgba alpha 不透明度悬停，以便在用户悬停时在图像上显示文本。

在 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 中运行。问题可能是您正在以较旧的文档模式查看页面，从而减少了对非 link 元素的 :hover 之类的支持，和 rgba 颜色。

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

确保您的文档首先以标准模式加载（在 IE 9 中是 9 文档模式），以 HTML5 文档类型开始您的文档:

<!DOCTYPE html>

您的文档中不应在此之前出现任何内容。

从那以后，紧跟HTML Specification. As an example of one deviation from the spec, you are placing a table within a span. The <span> element的意思就是要装只有分词内容，比如<a>，<strong>， <em>,等等

Internet Explorer hover/rgba/opacity/css3 兼容性

Internet Explorer hover/rgba/opacity/css3 compatibility

css

internet-explorer

hover

rgba

internet-explorer-9