5

我有一个带有图像的页面。当您将鼠标悬停在图像上时，会在其顶部出现一个略微透明的白色 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

在此处输入图像描述

4

2 回答 2

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 等）...

于 2012-04-26T21:15:36.527 回答
2

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

加载页面时，需要隐藏弹出窗口，所以我给了他们一个说display:none;. 当我悬停时，我会打开和关闭课程。在每个使用类似 facebook 的按钮的浏览器中，使用 IE 则没有。

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

于 2012-05-03T12:11:24.180 回答