IE8：Div hover 只在设置背景色时有效，很奇怪，为啥？
Posted
技术标签:
【中文标题】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添加背景颜色，它突然起作用了。
问题：这是什么原因？如何正确解决这个问题？
【问题讨论】：
非常丑陋的错误修正：添加透明图像作为背景... 【参考方案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
【讨论】：
以上是关于IE8：Div hover 只在设置背景色时有效，很奇怪，为啥？的主要内容，如果未能解决你的问题，请参考以下文章