Internet Explorer Like Button Madness

Question

I have a page with an image. When you hover over an image, a slightly transparent white div appears with a few action buttons and some information. When you move the mouse from the image, the information / button window disappears (display: none).

In this window of the hidden / mouse button there is a button in the form of Facebook. It looks great in all other browsers, but, as you might have guessed, this is a strange behavior in the notorious IE browsers. In IE7 - IE8, a similar button appears for only a second, and then disappears. It still leaves space in the design, for example, when it will be there, but it is not. It doesn't matter if I first capsized or not. The button appears for a second, then disappears. However, in IE9, the button appears and remains there. However, when I flip the second time, the iframe gets a white background, even though the first poll got a transparent background.

hidden mouse html code:

<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;
}

screenshots:

IE9

IE7

Answer 1

, .

, , , display:none;. , . , facebook, IE, .

, , , jquery .hide() .show() div , , . IE .

Answer 2

:

#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;
}

, , javascript, css, (javascript, html ..)...