Impossibile impostare lo stile marginTop con lo script utilizzando IE8, ma funziona nei browser di persone adulte

Question

Sto tentando di animare la diapositiva di un menu con lo script. Per fare questo, ho bisogno di animare la proprietà marginTop di un elemento e incrementarlo da -30px a 0px.

Tuttavia, in IE8, l'animazione semplicemente non fa nulla. Ho rintracciato il fatto che l'impostazione di marginTop in script sembra non avere alcun effetto. In Chrome e Firefox, questo funziona bene.

Ecco un esempio che funziona con Chrome/Firefox, ma non IE:

http://jsfiddle.net/rm58T/2/

Si tratta di un bug di IE, e se è così, ci sono delle soluzioni per questo comportamento? Grazie!

Aggiornamento:

Ecco alcune schermate del bug.

In Chrome, il mio violino si presenta così (Si può vedere il "Nome del nuovo menu" del testo, dal momento che abbiamo cambiato il margine con lo script)

In IE8/Vista, sembra che Questo. Posso confermare nei tool di sviluppo che topMargin è in realtà 0px come previsto, tuttavia gli elementi non sono state riprese tratte:

Un altro aggiornamento:

repros questo bug (almeno per me) su IE8 in esecuzione su Windows 7 e anche IE8 in esecuzione su Windows 2008 Server. NON replica per me su IE7 in esecuzione su WinXP. Non ho macchine IE9 per testarlo.

Ancora un altro aggiornamento:

ho trovato un potenziale work-around. Se si imposta p.newmenu su position: absolute; anziché su position: relative;, allora funziona. Tuttavia, nel mio caso sto ospitando l'intera cosa in un menu a comparsa e ho bisogno di questo controllo per estrarre la parte inferiore della finestra di dialogo modale, quindi posizionarlo in modo assoluto non è un'opzione. Tuttavia, forse questa conoscenza può aiutare a trovare una soluzione praticabile. Un esempio di questo lavoro può essere trovato here.

ci credereste Un altro aggiornamento ?:

ho fatto trovare una soluzione per ora. Se uso top: -30px; invece di un margine superiore negativo, allora tutto funziona. top si comporta in un modo leggermente diverso rispetto a un margine e rende l'interfaccia utente non molto carina. In particolare, quando usi top: -30px, avrai 30px di spazi bianchi sotto il tuo elemento poiché il posizionamento relativo non influenza il flusso di altre pagine.

Mi piacerebbe molto capire perché non riesco a utilizzare un margine superiore negativo su IE come faccio con altri browser, quindi spero ancora che qualcuno possa fornire una risposta che fornirà tutti i vantaggi di un margine superiore negativo ma funziona anche con IE8.

Answer 1

Il trigger per questo comportamento è come IE8 gestisce l'elemento fieldset.

È possibile aggirare il problema impostando la visualizzazione per fieldset su inline (o blocco in linea).

div.modal.addmenu fieldset { 
    display: inline; 
} 

Answer 2

Questo non è esattamente un bug; si basa solo sul fatto che (per tenere il passo con i confronti delle prestazioni) IE è stato creato dalla versione 5.5 con un predefinito minimizzato di definizioni statiche;

Ciò significa: Invece di spendere qualsiasi elemento, la definizione completa e corretta (a seconda di quale dio delle specifiche viene utilizzato per ...) per il tipo in questione, IE utilizza meno.

---

TODO: restituire ciò che dovrebbe essere accreditato per agire come un top-model comma relativamente posizionato; DISPLAY di conseguenza ai suoi talenti; qualsiasi super paragrafo dovrebbe fare la passerella in linea, anche se è un blocco -head, si potrebbe provare a usare zucchero e colpi di frusta per ricordare il tuo p cattivo della sua origine come inline-block. E 'un delirio P, dare un certo rispetto per il suo talento ...

---

DOJO: In realtà, è come uno script-javalchemist runa lettura essere colui che deve avere per prendere il controllo della birra il serve il browser. O fa boom, in silenzio ...

---

GODO: cose necessarie da fare se si desidera utilizzare negative-margini nei browser che non giocano legalmente:

• ricordare gli elementi che si desidera utilizzare dell'origine del proprio display; non credono nel browser vendor che avrebbero già fatto per voi

• • se si sono appena fuori per IE 7+ utilizzare display: inline-block;
• • SE si desidera ottenere negative-margini di effettuare su tutti i browser importanti, ma può dimenticare NS4, quindi utilizzare display: inline; o display: blocco;

• Non dimenticare di costruire le basi per i vostri negativi-margini: impostare position: relative;

---

MOJO: Se IE-beta e quelle più vecchie, come 5.5 o 6 sono nel vostro punto di interesse, è necessario assicurarsi che il vostro relativa in posizione negativa margine paragrafo ha valori per larghezza e altezza; A seconda di cosa stai cercando di raggiungere, a volte un'altezza : auto; aiuta.