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

【问题标题】：Internet Explorer hover/rgba/opacity/css3 compatibilityInternet Explorer hover/rgba/opacity/css3 兼容性
【发布时间】：2015-08-24 16:59:02
【问题描述】：

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

在 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>

【问题讨论】：

对我来说看起来不错。虽然您在第一种样式中确实有两个;，但这是无效的。
编辑了您的问题并删除了第二个;。

标签： css internet-explorer hover internet-explorer-9 rgba

【解决方案1】：

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

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

确保您的文档以标准模式开始加载（在 IE 9 中是 9 文档模式），以 HTML5 doctype 开始您的文档：

<!DOCTYPE html>

您的文档中不应出现任何内容。

从那时起，请严格遵守HTML Specification。作为偏离规范的一个示例，您将table 放置在span 中。 <span> element 旨在保存短语内容，例如 <a>、<strong>、<em> 等。

【讨论】：

这是因为没有没有启动文档，有没有办法让我在不使用的情况下正确创建它？
@JamesK 当然可以，但我不确定您想要的最终结果是什么。你能解释一下你想要达到的目标吗？我很乐意帮助你探索你的选择。
能够在悬停时为照片添加描述。这是我能想出的方法，它允许我控制我想要的布局（我尝试了很长时间使用列表来创建项目符号，但没有运气）。这是成品：jsfiddle.net/w8dvhv8p
听起来你应该看看<figure> 和<figcaption> 元素。您可以将<img> 和<figcaption> inside 放置在<figure> 中。然后，您可以根据需要隐藏标题，并在用户悬停<figure> 时显示它。在某些情况下，您可能需要加载 HTML5Shiv：github.com/afarkas/html5shiv