Internet Explorer Like button madness

问题

I have a page with an image. When you hover over the image, a slightly transparent white div appears on top of it with a couple of action buttons and some info. When you move your mouse off the image, the info/button box disappears (display: none).

In that hidden/mouseover box is a facebook like button. It shows up perfectly fine in all other browsers, but As you might have guessed, it has strange behaviour in the notorious IE browsers. In IE7 - IE8, the like button appears for just a second and then disappears. It still leaves a space in the design like when it would be there, it just isn't. Doesn't matter if I rollover first or not. Button appears for a second, then disappears. In IE9 however, the button does appear and stays there. When I rollover a second time though, the iframe gets a white background, even though the first rollover got me a transparent background.

html code of hidden mouseover div:

<div id="hoverPopup">
    <div class="fbLikeWrapper">
        <div class="fb-like" data-send="false" data-layout="button_count" data-show-faces="false"></div>
    </div>
    <a href="javascript:reserveGift(#qry_kadoogle_detail.id_kadoogle_detail#, 1)">
        <div class="btn_small_prefix"></div>
        <div class="btn_gift_center">button1</div>
        <div class="btn_small_suffix"></div>
    </a>
    <a href="##">
        <div class="btn_small_prefix"></div>
        <div class="btn_gift_center">button2</div>
        <div class="btn_small_suffix"></div>
    </a>
</div>

css code:

.fbLikeWrapper
{
    /*width       : 50px;
    margin-left : auto;
    margin-right: auto;*/
}
.fbLikeWrapper div
{
    display    : block;
    line-height: normal;
}

screen captures:

IE9

IE7

回答1:

Try this:

#hoverPopup .fb-like {
    width: 47px;
}

.fbLikeWrapper
{
    display     : inline-block;
    width       : 51px;
    text-align  : center !important;
    margin      : 30px auto 10px;
    box-sizing  : border-box;
    -moz-box-sizing     : border-box;
    -webkit-box-sizing  : border-box;
    overflow    : hidden;
}

If this not helps, may the javascript causing the problem, not the css and you have to share more information (javascript, html, etc.)...

回答2:

I found the answer through one of my colleagues who's had a similar problem.

When the page was loaded, the popup needed to be hidden, so I gave them a class that said display:none;. When I hover I toggle the class on and off. In every browser that works with a facebook like button, with IE it doesn't.

I don't exactly know why yet, but I did find out that if I use the jquery .hide() and .show() functions to toggle and initially set the hidden div and not use a class, it works like a charm. Case closed. IE continues to suck.

来源：https://stackoverflow.com/questions/10137838/internet-explorer-like-button-madness

标签

facebook

internet-explorer

iframe

facebook-like