IE8：Div悬停仅在设置背景颜色时才起作用，很奇怪，为什么？
情况：有一个带有按钮图像的 div。 Div 需要在悬停时淡入。适用于除 Internet Explorer 之外的所有浏览器。当我给 div 设置背景颜色时，它突然起作用了。
检查： http://ListAndPlay.com ，左上角是控件。
悬停在 IE 中不起作用，尝试为 #buttons 添加背景颜色，它突然起作用了。
问题：这是什么原因？如何正确解决这个问题？
Situation: Got a div with buttons images. Div needs to fadeIn on hover. Works in all browsers, except Internet Explorer. When I give the div a background color it suddenly works.
Check: http://ListAndPlay.com , top left are the controls.
The hover won't work in IE, try to add a background color to #buttons and it suddenly works.
Question: What is the reason for this? How to fix this properly?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
我最近也遇到了这个问题。我还通过向悬停元素添加 1 x 1 像素的透明背景图像来解决该问题。之后我想洗个澡。
I recently ran in to this problem also. I also solved it by adding a 1 by 1 px transparent background image to the hover element. I felt like taking a shower afterwards.
我今天遇到了这个问题，当鼠标悬停时会出现一个
透明覆盖层div。在鼠标悬停在覆盖层的文本内容上之前，IE9 不会激活悬停。在 Chrome 和 FF4 上运行良好。我没有尝试透明图像解决方法，但这似乎工作得很好：rgba(0,0,0,0)。诡异的...I had this issue just today making a
transparentoverlay div appear when hovered on. IE9 wouldn't activate hover until the mouse was over the text content of the overlay. Worked fine on Chrome and FF4. I didn't try the transparent image workaround, but this seemed to work just fine:rgba(0,0,0,0). Weird...我的解决方案是在需要悬停的元素上设置背景颜色，然后使用 CSS
opacity属性将其隐藏。以过滤器的形式为 IE 提供后备。此解决方案不需要透明的 PNG，并且与 rgba 解决方案不同，它可以在旧版本的 IE 中工作。
My solution is to set a background color on the element you need to hover, then use the CSS
opacityproperty to hide it. A fallback is provided for IE in the form of a filter.This solution doesn't require a transparent PNG, and unlike the rgba solution it works in older versions of IE.
这是由于有布局。使用position:relative 将给出相同的结果，而不使用不需要的背景图像。
This is due to has layout. Using position:relative will give the same result without use of a unwanted background image.
我遇到了同样的问题。对我来说，问题似乎与在 ie8 中使用 html5 元素（例如
在这种情况下，添加 html5shiv 解决了问题。其他提出的解决方案都没有任何效果。
I encountered the same issue. For me, the problem seemed to be related to using html5 elements (e.g.
<footer>andheader) in ie8, and forgetting to use html5shiv to add support for those elements for older browsers.In this case, adding the html5shiv solved the problem. None of the other proposed solutions had any effect.
我在使用 HTML5 的 IE8 上也遇到了同样的问题。我的解决方案受到赫尔曼的启发。我设置了背景图像，然后从其中不存在的部分创建背景。基本上，我要求浏览器显示超出图像尺寸的内容。
为了避免不必要的流量，它可以是网站的精灵或页面上已使用的任何其他有效图像。
I've got the same problem with IE8 using HTML5. My solution was inspired by Herman's. I set a background image and then I'm creating background from non-existing part of it. Basically, I'm asking the browser to display something that is beyond image's dimensions.
To avoid unnecessary traffic it can be website's sprite or any other valid image that it's already being used on the page.
即使使用最新版本的 IE9，我也遇到同样的问题。正如 MeProtozoan 所建议的，向锚点添加透明背景图像可以使行为按预期工作，但是该死的它很脏。
Even with the latest version of IE9 I have this same issue. As MeProtozoan suggested, adding a transparent background image to the anchor(s) gets the behavior working as desired, but damn it's dirty.
我遇到了类似的问题，悬停在 div 中无法在 IE8 中工作，并更改我的文档类型来
修复它。
更多详情
I had similar problem with hover in div not working in IE8 and changing my doctype to
fixed it.
More details here