发表新帖
发表新帖

IE8: Div hover only works when background color is set, very strange, why?

后端 未结
关注
8 1603
遇见更好的自我
遇见更好的自我 2020-12-10 04:55

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 co

相关标签:
8条回答
  • 忘了有多久
    2020-12-10 05:08

    I encountered the same issue. For me, the problem seemed to be related to using html5 elements (e.g. <footer> and header) 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.

    0 讨论(0)
  • 遇见更好的自我
    2020-12-10 05:10

    I had similar problem with hover in div not working in IE8 and changing my doctype to 

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

    fixed it.

    More details here

    0 讨论(0)
  • 佛祖请我去吃肉
    2020-12-10 05:17

    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.

    0 讨论(0)
  • 时光说笑
    2020-12-10 05:18

    I had this issue just today making a transparent overlay 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...

    0 讨论(0)
  • 天涯浪人
    2020-12-10 05:18

    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.

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

    To avoid unnecessary traffic it can be website's sprite or any other valid image that it's already being used on the page.

    0 讨论(0)
  • 攒了一身酷
    2020-12-10 05:30

    My solution is to set a background color on the element you need to hover, then use the CSS opacity property to hide it. A fallback is provided for IE in the form of a filter.

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

    This solution doesn't require a transparent PNG, and unlike the rgba solution it works in older versions of IE.

    0 讨论(0)
 看不清?
提交回复
热议问题