Internet Explorer Wie Schaltfläche Wahnsinn

Question

Ich habe eine Seite mit einem Bild. Wenn Sie den Mauszeiger über das Bild bewegen, erscheint ein leicht transparentes weißes div mit einigen Aktionsschaltflächen und einigen Informationen darüber. Wenn Sie die Maus aus dem Bild bewegen, verschwindet die Info/Button-Box (Anzeige: keine).

In dieser versteckten/mouseover-Box ist eine Facebook-ähnliche Schaltfläche. Es zeigt sich in allen anderen Browsern einwandfrei, aber wie Sie vielleicht vermutet haben, hat es seltsames Verhalten in den berüchtigten IE-Browsern. In IE7 - IE8 erscheint die gleiche Schaltfläche für nur eine Sekunde und verschwindet dann. Es hinterlässt immer noch einen Platz im Design, als wenn es da wäre, es ist einfach nicht. Es spielt keine Rolle, ob ich zuerst Rollover oder nicht. Taste erscheint für eine Sekunde und verschwindet dann. In IE9 jedoch erscheint die Schaltfläche und bleibt dort. Wenn ich jedoch ein zweites Mal rolle, erhält der Iframe einen weißen Hintergrund, obwohl der erste Rollover mir einen transparenten Hintergrund verschafft hat.

HTML-Code versteckt 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; 
} 

Screenshots:

IE9

IE7

Answer 1

Ich fand die Antwort durch einen meiner Kollegen, der ein ähnliches Problem hatte.

Wenn die Seite geladen wurde, musste das Popup ausgeblendet werden, also gab ich ihnen eine Klasse mit der Nummer display:none;. Wenn ich schwebe, schalte ich die Klasse ein und aus. In jedem Browser, der mit einem Facebook-ähnlichen Button arbeitet, funktioniert das bei IE nicht.

Ich weiß nicht genau, warum noch nicht, aber ich fand heraus, dass, wenn ich die jQuery .hide() und .show() Funktionen verwenden zu wechseln und zunächst die versteckten div und nicht verwenden, um eine Klasse festgelegt, es funktioniert wie ein Charme. Fall geschlossen. IE fährt fort zu saugen.

Answer 2

Versuchen Sie folgendes:

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

Wenn dies nicht hilft, kann das Javascript verursacht das Problem, nicht die CSS und Sie müssen mehr Informationen (Javascript teilen, html, etc.) ...