1. casa
  2. Domanda e risposta
  3. Le righe in bilico in una tabella in Internet Explorer sono lente con qualsiasi doctype

Le righe in bilico in una tabella in Internet Explorer sono lente con qualsiasi doctype

2010-10-21 3 views
10

Ok, questo mi sta facendo impazzire.Le righe in bilico in una tabella in Internet Explorer sono lente con qualsiasi doctype

Ho una tabella html con circa 100 righe. Voglio che le righe cambino colore quando muovi il mouse sopra di esso.

ho provato:

  • : hover in CSS,

  • onmouseover/onmouseout eventi in javascript

  • jquery .hover

  • jquery .mouseover/.mouseout

  • passaggio del mouse sul tavolo con e.target ecc

Tutto il lavoro perfettamente veloce in Firefox, e terribilmente lento in IE7/IE8. Non importa quale doctype ho provato. Ma se rimuovo completamente il doctype della pagina (quirks), allora è molto veloce anche in IE!

Purtroppo non avendo doctype non è accettabile per me, perché io uso altri componenti (jQuery UI) che sembrano come un doctype (altrimenti questi ottenere lento in IE!)

Qualche suggerimento?

alla prova:

modalità

quirks (veloce in bilico in IE): http://www.watikwil.nl/test_quirks.html

modalità rigorosa (lento librarsi in IE): http://www.watikwil.nl/test_strict.html

UPDATE: Ho trovato che l'uso di uno sfondo -immagine per la riga in bilico è in realtà più veloce in IE rispetto all'utilizzo di sfondo-colore !! Ma questo funziona solo velocemente quando si usa: hover. I metodi jquery o javascript non funzionano velocemente. Non è ancora veloce come Firefox, ma è accettabile per me.

* UPDATE 2: il problema persiste. In IE8 è ancora troppo lento, soprattutto quando si hanno più classi sulle righe (come fa jqGrid) *

UPDATE 3: In qualche modo ce l'ho a lavorare ora con IE8. Alcune classi usate da JqGrid, non so più se questo ha fatto la differenza. Sto usando: passa il mouse con un'immagine di sfondo. Il fatto è che quando impongo alla pagina di utilizzare la modalità Standard IE7, è notevolmente più veloce. Ma quando provo la stessa pagina in IE7, è MOLTO lento di nuovo ... davvero facendomi impazzire ...

fonte

2010-10-21 Dylan

+0

Cosa succede se si imposta il layout della tabella su fisso? Non posso dire di aver osservato questo problema (con tabelle o meno). Hai qualche link di prova? –

+0

l'impostazione del layout della tabella su fisso non aiuta ... è solo molto più veloce nella modalità quirk! Ho provato a impostare una tabella utilizzando DIV e sembra molto più veloce dell'utilizzo di

, ma l'applicazione su cui sto lavorando utilizza JqGrid che utilizza uno
– Dylan

+0

Ho aggiunto alcuni link di test ora, in IE l'hovering è molto più lento usando un doctype (rigoroso) – Dylan

risposta

0

Mentre il doctype può mostrare il problema, il problema non è causato dal doctype. Posso solo sospettare che sia causato da javascript ma hai alcuni problemi di convalida che devi risolvere prima. Convalida il tuo codice HTML per quell'elenco di errori.

fonte

2010-10-23 14:04:37 Rob

+0

Ho cambiato l'esempio rigoroso ora in html5 e ora lo convalida correttamente. Non fa alcuna differenza ... Se cambio la modalità di rendering su IE7 (in Internet Explorer 8) l'hovering è veloce come un fulmine. – Dylan

+0

Smetti di scherzare con il doctype! È la prima cosa che va su una pagina e MAI cambia. Non dovrebbe avere alcun effetto su come il browser gestisce questo, ma stiamo parlando di IE qui e non puoi mai fidarti di IE per fare qualcosa di giusto. – Rob

+0

Modificato in xhtml strict, rimosso javascript e modificato il passaggio del mouse su css: hover. Ancora molto lento in IE8. – Dylan

3

Sì, anche io ho riscontrato questo problema e la velocità di rendering delle tabelle è stata un problema in IE per sempre.Noterai un peg della CPU (utilizzo del 50% di IE sul mio doppio) mentre trascini il mouse.

È possibile, tuttavia, utilizzare la decorazione del testo: sottolineatura su CSS: passa il mouse senza causare questo effetto di ricalcolo della tabella.

Capisco il commento di Rob che il doctype non è correlato (e santo), ma è un pio desiderio. Il problema è facilmente riproducibile con una tabella molto spartana, senza attributi di cella o attributi di singole righe oltre a: hover CSS. Ovviamente, misurare l'effetto di DOCTYPE su questo è difficile, dal momento che quando si spegne STRICT si disabilita l'abilità di IE di applicare: passa il mouse sugli elementi non di collegamento. Disegnare i sottolineati sul testo con un semplice bordo CSS e senza espressioni javascript o CSS ecc. Nella pagina causa anche il problema, tuttavia la decorazione del testo non lo fa. Apparentemente IE sopprime il ricalcolo della tabella specificamente per quella regola CSS, nel caso abbiate dei collegamenti nella vostra tabella. (In altre parole, gli sviluppatori MS sapevano del problema prima di rilasciare il difetto la prima volta, ed è ancora lì 2 versioni principali tardi Che bello :)..) Quindi, ecco un test più fresco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css"> 
    a:hover { text-decoration: line-through; } 
    a:hover { line-height: 1.1em; } 
</style></head><body><table><tbody> 
    <tr> 
     <td><a href='#'>Test</a></td> 
etc.

Nota che, sopra, non si vede il problema se si rimuove la regola CSS 'line-height' o se si passa a DOCTYPE TRANSITIONAL. Nota anche che dipende pesantemente dalla tua CPU quante celle hai bisogno. Si noti inoltre che è il numero totale di celle, sia in righe che in colonne (o più tabelle!), Che causano questo scarso rendimento delle tabelle IE di rendering quando gli stili CSS cambiano.

ho la sensazione (non l'ho provato, ma mi piacerebbe il codice se si fa:>) che se invece di cambiare il colore sulla riga della tabella stessa, si rilascia un png trasparente di fronte ad essa che non causa il ricalcolo delle dimensioni della tabella in IE, otterrai le prestazioni che stai cercando. Potrebbe anche essere inserito nel div che probabilmente stai già usando per far scorrere il tuo tavolo, no grazie ad altri problemi di IE con le tabelle. Immagino che tu possa ottenere un effetto hover adatto (non esattamente quello che avevi in ​​mente graficamente, ma visivamente lavorabile) con questo metodo.

Ho convertito il mio tavolo in div con dimensioni fisse, maledicendo MS per una volta ancora mi ha fatto scegliere tra lanciare il mio progetto o sprecare ore di progetto.

fonte

2010-11-04 13:04:23 Shannon

+0

P.S. Nel caso in cui il mio vagabondaggio non fosse chiaro, dal momento che stai già usando jquery, perché non provare a usarlo per ottenere la posizione degli angoli in alto a sinistra e in basso a destra del TR, e posizionare un div in posizione assoluta con una png trasparente FUORI dal tavolo? – Shannon

+0

nota che un'altra persona segnala che se si applicano determinati attributi di stile (ad esempio background) direttamente all'elemento piuttosto che cambiando la classe di elemento in uno con gli attributi desiderati, IE eseguirà meno ridisegno del lavoro. – Shannon

 Problemi correlati

  • Nessun problema correlato^_^