firefox posizione assoluta all'interno di un relativo problema contenitore

Question

sto usando tavolo per la visualizzazione dei miei dati generati in modo dinamico dipendono l'input dell'utente la struttura html è appare come di seguito:

<table> 
<tr> 
    <td>.....</td> 
    <td>.....</td> 
    <td style="position:relative;"> //like this i set for all td in table 
    <div style="position:absolute">//like this i set for all div in table 
    <contents> 
    </div> 
    </td> 
    <td>.....</td> 
    <td>.....</td> 
</tr> 
</table> 

Qui il div è va a alto di il corpo. Tutti questi stili sopra sono applicati con il javascript e funzionano bene in cromo, IE, ma non in FF come l'immagine qui sotto.

se cambiamo la posizione del div di assoluta relativa sarà allineare correttamente, ma io sono fare un effetto hover, mentre l'utente passa il div per che le posizioni sono importanti e questo problema si verifica solo in firefox

per il controllo di riferimento molto veloce il jquery http://www.malsup.com/jquery/hoverpulse/

devo simili devono essere attuate all'interno della tabella in FIREFOX che significa

• Ogni immagini poste all'interno di una td//<td style="position:relative;">

• se librazione utente su un td l'immagine deve impulso (effetto zoom).

• Quando l'utente muovere fuori dovrebbe passa allo stato precedente. (Dimensioni normali)

La struttura della tabella è già dato sopra.

Answer 1

Il posizionamento delle celle di tabella è problematico. La solita soluzione è quella di lasciare lo stile di td da solo e inserire un div in esso che si crea position:relative. Quindi posiziona il contenuto all'interno di quel div.

<td> <!-- no style at all --> 
<div style="position:relative;"> 
    <div style="position:absolute"> <!-- original div --> 
    <contents> 
    </div> 
</div> 
</td> 

Edit:
Non so che effetto che cercate, ma ecco un jsFiddle dimostrando il problema: http://jsfiddle.net/ygP7k/5/
Ha un tavolo con le piccole div con posizione assoluta in ogni cella di tabella, che dovrebbero allinearsi agli angoli in basso a destra. Funziona su tutti i browser eccetto quelli Mozilla.

Ma qui è una versione aggiornata di quello con i div in più come ho già detto: http://jsfiddle.net/ygP7k/7/
Questo funziona esattamente lo stesso, solo che lo fa anche il trucco in Firefox.

Potete lavorare con questo? Questo risponde alla tua domanda?

Answer 2

Ho guardato il hoverplus plugin jQuery e il file di origine mostra il metodo utilizzato:

// parent must be relatively positioned 
this.parent().css({ position: 'relative' }); 

// pulsing element must be absolutely positioned 
this.css({ position: 'absolute', top: 0, left: 0 }); 

A causa di requisiti di questo plug-in e le vostre esigenze di progettazione attuali, mi consiglia di utilizzare .transit() plugin per jQuery che ha funzioni di zoom potenti e facili da usare senza tali requisiti.

ho preparato due Esempi Tabella, ognuna con di Div e come si può vedere dalla marcatura, non può essere più facile!

jsFiddle DEMO of Zoomed Div's with Images in Tables

Dopo si dà un'occhiata al jsFiddle ho fatto per voi, potete vedere l'insieme .transit() caratteristiche del plugin sulla pagina demo HERE.

MODIFICA: Il jsFiddle ora richiede lo stile CSS per il tag td di position:relative per l'aggiornamento.

Answer 3

si deve aggiungere 2 div nella tabella 1 con position:relative e 2 ° con position:absolute

<td> 
<div style="position:relative"> 
<div style="position:absolute">ddd</div> 
</div> 
</td> 

il vostro problema sarà risolto controllo violino

http://jsfiddle.net/rizwanabbasi/2hyE8/1/

Answer 4

Ho avuto un problema simile. Ho avvolto il div assoluto problematico in un div assoluto che ha fissato il problema:

<div class="thumbnail" style="..position:relative;.."> 
     <div style="position:absolute;"> 
     <div class="thumbnail-heart" style="..position:absolute;.."> 
      <img src="../image.png" style="float:right;position:relative;.."> 
      ... 
     </div> 
     </div> 

Answer 5

ho risolto il problema aggiungendo display: block;

.table td div { 
    position:absolute; 
    display:block; 
} 

nel tuo caso:

<table> 
<tr> 
    <td>.....</td> 
    <td>.....</td> 
    <td style="position:relative;"> <!-- like this i set for all td in table --> 
    <div style="position:absolute; display:block"> <!-- like this i set for all div in table --> 
    <contents> 
    </div> 
    </td> 
    <td>.....</td> 
    <td>.....</td> 
</tr> 
</table>