Internet Explorer喜欢按钮疯狂 [英] Internet Explorer Like button madness

查看:132
本文介绍了Internet Explorer喜欢按钮疯狂的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个包含图像的页面。当您将鼠标悬停在图像上时,会出现一个稍微透明的白色div,其中有几个动作按钮和一些信息。当您将鼠标从图像上移开时,信息/按钮框消失(显示:无)。



在隐藏/鼠标悬停框中是一个像Facebook的按钮。它在所有其他浏览器中显示得非常好,但正如你可能猜到的,它在臭名昭着的IE浏览器中有奇怪的行为。
在IE7 - IE8中,类似的按钮只显示一秒钟,然后消失。它仍然在设计中留下一个空间,就像它在那里一样,只是不是。无论我是否首先翻转,都不要紧。按钮出现一秒钟,然后消失。
然而,在IE9中,按钮确实出现并停留在那里。当我第二次翻滚时,iframe获得白色背景,即使第一次翻转让我有一个透明的背景。



隐藏的mouseover div的html代码:

 < div id =hoverPopup> 
< div class =fbLikeWrapper>
< div class =fb-likedata-send =falsedata-layout =button_countdata-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



解决方案

通过我的同事发现了一个类似问题的答案。 / p>

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



我不完全知道为什么,但是我确实发现,如果我使用jquery .hide() .show()函数切换并初始设置隐藏的div并且不使用一个类,它的作用就像一个魅力。
案件关闭。 IE继续吸引。


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

解决方案

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.

这篇关于Internet Explorer喜欢按钮疯狂的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆