Internet Explorer喜欢按钮疯狂

Question

我有一个带图像的页面.当您将鼠标悬停在图像上方时,会在其顶部显示一个略微透明的白色div,其中包含一些操作按钮和一些信息.当您将鼠标从图像上移开时,信息/按钮框将消失(显示:无).

在隐藏/鼠标悬停框中是一个类似Facebook的按钮.它在所有其他浏览器中显示完全正常,但正如您可能已经猜到的,它在臭名昭着的IE浏览器中有奇怪的行为.在IE7 - IE8中,like按钮会出现一秒钟然后消失.它仍然在设计中留下了一个空间,就像在那里一样,它只是不存在.如果我先翻滚或不翻转都没关系.按钮出现一秒钟,然后消失.然而,在IE9中,按钮确实出现并保持在那里.当我翻转第二次时,iframe获得白色背景,即使第一次翻转让我有透明背景.

隐藏鼠标悬停div的html代码:

<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代码:

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

屏幕截图:

IE9

IE7

Answer 1

我通过一位遇到类似问题的同事找到了答案。

当页面加载时，需要隐藏弹出窗口，所以我给了他们一个类，表示display:none;. 当我悬停时，我会打开和关闭课程。在每个支持 Facebook 之类按钮的浏览器中，IE 则不然。

我还不完全知道为什么，但我确实发现，如果我使用 jquery.hide()和.show()函数来切换并最初设置隐藏的 div 并且不使用类，它就会像魅力一样工作。案件结案。IE 继续糟糕。