Internet Explorer Come follia pulsante

Question

Ho una pagina con un'immagine. Quando si passa con il mouse sopra l'immagine, viene visualizzato un div in bianco leggermente trasparente con un paio di pulsanti di azione e alcune informazioni. Quando si sposta il mouse fuori dall'immagine, la casella informazioni/pulsante scompare (display: nessuno).

In quella casella nascosta/passaggio del mouse è un pulsante simile a Facebook. Si mostra perfettamente bene in tutti gli altri browser, ma come avrete intuito, ha uno strano comportamento nei famigerati browser IE. In IE7 - IE8, il pulsante mi piace appare solo per un secondo e quindi scompare. Lascia ancora uno spazio nel design come quando sarebbe lì, semplicemente non lo è. Non importa se ho prima il rollover o no. Il pulsante appare per un secondo, quindi scompare. In IE9 tuttavia, il pulsante appare e rimane lì. Tuttavia, quando eseguo il rollover una seconda volta, l'iframe diventa uno sfondo bianco, anche se il primo rollover mi ha fornito uno sfondo trasparente. Codice

html di div nascosti mouseover: codice

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

bloccaggi di schermo:

IE9

IE7

Answer 1

Ho trovato la risposta attraverso uno dei miei colleghi che ha avuto un problema simile.

Quando la pagina è stata caricata, il popup doveva essere nascosto, quindi ho dato loro una classe che diceva display:none;. Quando passo il mouse, attiva e disattiva la classe. In ogni browser che funziona con un pulsante simile a Facebook, con IE no.

io non so esattamente il motivo per cui ancora, ma ho scoperto che se uso il jquery .hide() e .show() funzioni per attivare e inizialmente impostare il div nascosto e non utilizzare una classe, funziona come un fascino. Caso chiuso. IE continua a succhiare.

Answer 2

Prova questo:

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

Se questo non aiuta, può il javascript che causa il problema, non il css e si deve condividere più informazioni (javascript, html, ecc.) ...