IE8：Div hover 只在设置背景色时有效，很奇怪，为什么？答案

【问题标题】：IE8: Div hover only works when background color is set, very strange, why?IE8：Div hover 只在设置背景色时有效，很奇怪，为什么？
【发布时间】：2011-04-29 06:34:45
【问题描述】：

情况：有一个带有按钮图像的 div。 div 需要在悬停时淡入。适用于除 Internet Explorer 之外的所有浏览器。当我给 div 一个背景颜色时，它突然起作用了。

检查：http://ListAndPlay.com，左上角是控件。

悬停在IE中不起作用，尝试为#buttons添加背景颜色，它突然起作用了。

问题：这是什么原因？如何正确解决这个问题？

【问题讨论】：

非常丑陋的错误修正：添加透明图像作为背景...

标签： jquery css html hover transparent

【解决方案1】：

我最近也遇到了这个问题。我还通过向悬停元素添加 1 x 1 px 透明背景图像来解决它。之后我想洗个澡。

【讨论】：

我也得洗个澡。我确实有一个background: transparent 的解决方案，但我可能一直在自欺欺人——有人可能想玩这个。

【解决方案2】：

我今天遇到了这个问题，当鼠标悬停在上面时会出现 transparent 覆盖 div。在鼠标悬停在覆盖的文本内容上之前，IE9 不会激活悬停。在 Chrome 和 FF4 上运行良好。我没有尝试透明图像解决方法，但这似乎工作得很好：rgba(0,0,0,0)。奇怪...

【讨论】：

不错的发现，而且比使用透明图像要好得多。是的，很奇怪:)
这在 IE6、7、8 中不起作用，因为它们不支持 rgba 最好的方法是使用 2x2 透明 png

【解决方案3】：

我的解决方案是在需要悬停的元素上设置背景颜色，然后使用 CSS opacity 属性将其隐藏。以过滤器的形式为 IE 提供了一个回退。

.element {
  background-color: #fff;
  opacity: 0;
  filter: alpha(opacity=1);
}

此解决方案不需要透明 PNG，并且与 rgba 解决方案不同，它适用于旧版本的 IE。

【讨论】：

【解决方案4】：

这是由于有布局。使用 position:relative 将得到相同的结果，而无需使用不需要的背景图像。

【讨论】：

【解决方案5】：

我遇到了同样的问题。对我来说，问题似乎与在 ie8 中使用 html5 元素（例如 <footer> 和 header）有关，而忘记使用 html5shiv 为旧版浏览器添加对这些元素的支持。

在这种情况下，添加 html5shiv 解决了问题。其他提议的解决方案都没有任何效果。

【讨论】：

【解决方案6】：

我在使用 HTML5 的 IE8 中遇到了同样的问题。我的解决方案受到 Herman 的启发。我设置了一个背景图像，然后我从它不存在的部分创建背景。基本上，我要求浏览器显示超出图像尺寸的内容。

background: url(myimage.png) 300px 0px no-repeat;

为避免不必要的流量，它可以是网站的精灵或任何其他已在页面上使用的有效图像。

【讨论】：

【解决方案7】：

即使使用最新版本的 IE9，我也有同样的问题。正如 MeProtozoan 建议的那样，向锚点添加透明背景图像可以让行为按预期工作，但该死它很脏。

【讨论】：

【解决方案8】：

我有类似的问题，在 div 中悬停在 IE8 中不起作用并将我的文档类型更改为

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

修复它。

More details here

【讨论】：