Internet Explorer的Like按钮疯狂(Internet Explorer Like

2019-09-16 12:19发布

我有一个网页的图像。 当你将鼠标悬停在图片,稍透明的白色格在它的上面出现了几个操作按钮和一些信息。 当您移动鼠标关闭图像,信息/按钮框消失(显示:无)。

在这种隐藏/鼠标悬停盒就像一个按钮,Facebook的。 它显示了在所有其他浏览器完全正常,但正如你可能已经猜到了,它在臭名昭著的IE浏览器奇怪的行为。 在IE7 - IE8,类似按钮会出现在那一瞬间,然后消失。 它仍然留下像当它会在那里设计一个空间,它只是不。 如果我第一次展期与否并不重要。 按钮出现一秒钟,然后消失。 然而,在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:

尝试这个:

#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等)...



Answer 2:

我找到了答案,通过谁的也有类似的问题,我的一个同事。

当加载页面,弹出需要被隐藏的,所以我给了他们一个类,说display:none; 。 当我将鼠标悬停我打开和关闭类。 在每一个与像按钮Facebook的工作,用IE浏览器没有。

我完全不知道为什么,但我没有发现,如果我使用jQuery的.hide().show()函数来进行切换,并初步确定了隐藏的div,而不是使用一个类,它的工作原理就像一个魅力。 结案。 IE继续吸。



文章来源: Internet Explorer Like button madness