Il CSS non si applica agli elementi creati dinamicamente in IE 7?

Ancora in cerca di una risposta.Il CSS non si applica agli elementi creati dinamicamente in IE 7?

Modifica o riassegnazione al filtro innerHTML ridisegna correttamente l'elemento, ma interrompe il mio script, quindi non è disponibile.

L'aggiunta di nodi figlio aggiuntivi, inclusi i nodi di testo, non impone il ridisegno. La rimozione del nodo aggiunto non impone un ridisegno.

L'utilizzo della famiglia di script ie7.js non funziona.

Nel progetto cui sto lavorando, ho generare dinamicamente (con javascript) filtri che assomigliano a questo:

<div class="filter"> 
    <a ... class="filter_delete_link">Delete</a> 
    <div class="filter_field"> 
     ... 
    </div> 
    <div class="filter_compare"> 
     ... 
    </div> 
    <div class="filter_constraint"> 
     ... 
    </div> 
    <div class="filter_logic"> 
     ... 
    </div> 
</div>

e devo CSS che si applica a ciascun filtro (per esempio):

.filter a.filter_delete_link{ 
    display:block; 
    height:16px; 
    background: url('../images/remove_16.gif') no-repeat; 
    padding-left:20px; 
}

Tuttavia, sembra in IE 7 (e probabilmente 6 per quella materia), questi stili non vengono applicati ai nuovi filtri.

Tutto funziona perfettamente in Firefox/Chrome/IE8.

Utilizzando gli strumenti di sviluppo di IE8, impostato sulla modalità IE7, il browser può vedere i nuovi elementi e può visualizzare il CSS, ma non applica il CSS.

C'è un modo per forzare IE a ricaricare gli stili, o forse c'è un modo migliore per risolvere questo problema?

La JavaScript: (semplificato)

var builder = { 
    ... 
    createNewFilter: function() { 
     var newFilter = document.createElement('div'); 

     var deleteLink = document.createElement('a'); 
     deleteLink.href = '#'; 
     deleteLink.setAttribute('class','filter_delete_link'); 
     deleteLink.title = 'Delete Condition'; 
     deleteLink.innerHTML = "Delete"; 
     newFilter.appendChild(deleteLink); 

     var field = document.createElement('div'); 
     field.setAttribute('class','filter_field'); 
     var fieldSelect = this.getFieldSelectBox(); 
     field.appendChild(fieldSelect); 
     newFilter.appendChild(field); 

     // more of the same... 

     deleteLink.onclick = function() { 
      builder.removeFilter(newFilter); 
     }; 
     fieldSelect.onchange = function() { 
      builder.updateFilter(newFilter); 
     } 

     return newFilter; 
    }, 
    addNewFilter: function() { 
     var nNewFilter = this.createNewFilter(this.numFilters++); 
     this.root.insertBefore(nNewFilter,this.nAddLink); 

     //other unrelated stuff... 

     //provided by Josh Stodola 
     //redraw(this.root); 

     return nNewFilter; 
    } 
}

fonte

2010-05-27 Austin Hyde

Nella tua pagina reale, hai più valori di "classe"? IE può essere piuttosto stupido riguardo alle regole ".foo .bar" quando il contenitore e il contenitore hanno entrambi valori multipli nella "classe". – Pointy

A punta, non uso più classi, e proprio per questo motivo :) Ho anche provato a semplificare il css semplicemente a ".filter_delete_link", ma non andare. –

IE6 ha problemi con più classi, IE7 non dovrebbe. –

Il problema, ho scoperto è che IE 6/7 non registra le modifiche al nome della classe con elm.setAttribute('class','x') finché l'UI non viene ridisegnata.

La soluzione è quella di utilizzare il modulo elm.className = 'x'

** Questo problema è anche evidente dal muoversi da quirks IE9 alla modalità standard. La soluzione era la stessa.

fonte

2010-06-02 19:09:22

Grazie per avermi postato, ho faticato per un po 'con questo pezzo noioso. – montrealist

Grazie, anche questo ha risolto il mio problema. – Polaris878

Grazie mille! State cercando ore per questa soluzione. –

Potrebbe essere che ti manca "alla fine di alcuni elementi

<a ... class="filter_delete_link>Delete</a> missing " 
<div class="filter_field> missing "

fonte

2010-05-27 14:13:39 fredrik

Solo un errore di battitura. Risolto ora. –

Hai un mancante "? sulla riga che legge <a ... class="filter_delete_link>Delete</a>

Modifica:
Non penso che sia un problema con IE7 in quanto sembra funzionare bene qui - http://jsfiddle.net/nhvrA/.
Continuerò a indagare.

fonte

2010-05-27 14:14:19 Sam

no, solo un errore di battitura. Risolto ora. –

Non sto usando jQuery (mi piacerebbe essere, * brontolare, brontolare *). Forse jQuery ha un codice per ricaricare gli stili? –

IE6/7 ha un sacco di problems/bugs/misbehaviours per quanto riguarda la creazione e l'aggiunta di elementi nel DOM utilizzando createElement. Consiglio vivamente di passare a jQuery per questo poiché fa tutto il lavoro in un browser compatibile e ha già preso (quasi) tutti i comportamenti specifici di IE6/7 in considerazione in modo da non dover finire con un raddoppio quantità di codice per farlo funzionare in tutti i browser di cui il mondo è a conoscenza. Ecco un copy'n'paste'n'runnable SSCCE:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Test</title> 
     <script src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $('#add').click(function() { 
        var newElement = $('<div class="filter"><a href="#" class="delete">delete</a></div>'); 
        $('#container').append(newElement); 
       }); 
      }); 
     </script> 
     <style> 
      .filter { background: pink; } 
      .delete { background: yellow; } 
     </style> 
    </head> 
    <body> 
     <div id="container"></div> 
     <button id="add">add</button> 
    </body> 
</html>

Aggiornamento: come per i commenti, jQuery non è assolutamente un'opzione. Bene, la cosa migliore da provare è impostare gli attributi degli elementi solo dopo l'elemento è stato aggiunto al DOM. Prova anche a non clonare i nodi in IE6/7, questo è spesso un fallimento epico.Piuttosto, crea un nuovo nodo dall'inizio.

fonte

2010-05-27 14:28:15 BalusC

Vorrei poter passare a jQuery, è quello che uso normalmente. Tuttavia, non è un'opzione in questo momento :( –

Perché no? In ogni caso, prova a impostare gli attributi dell'elemento * dopo * l'elemento è stato aggiunto al DOM. Prova anche a non clonare i nodi in IE6/7, questo è spesso epico fallire. Anziché creare un nuovo nodo dall'inizio. – BalusC

Bene, sto aggiungendo gli attributi prima e clonando, quindi cercherò di risolverlo. –

Mi sembra che sia necessario forzare un ridisegno dell'interfaccia utente per questo elemento. Ci sono diversi modi per fare questo, ma ciò che segue è il metodo più efficace ...

// elm is a reference to your element 
var disp = elm.style.display; 
elm.style.display = "none"; 
var redrawFix = elm.offsetHeight; 
elm.style.display = disp;

Ecco un altro metodo I found on Ajaxian ...

function redraw(elm) { 
    var n = document.createTextNode(' '); 
    elm.appendChild(n); 
    setTimeout(function(){ n.parentNode.removeChild(n) }, 0); 
    return elm; 
}

fonte

2010-05-27 14:31:33

beh, il primo metodo non funziona e il secondo metodo fallisce perché IE non sa cosa ' Function.prototype.defer' è –

@Austin Whoops, hai ragione. 'Defer' è una funzione di Prototype (JS framework) che mantiene la chiamata della funzione fino a quando l'interprete è inattivo.Ho aggiornato la mia risposta per non dipendere da quella funzione quadro, ma invece usa un metodo simile. –

Capisco cosa stai cercando di fare. Tuttavia, non funziona. Ho provato a cambiare il timeout per aspettare più a lungo e non ha funzionato. Ho provato a lasciare il nodo in più. Nessun risultato. Ciò che funziona è 'elm.innerHTML + = '';', ma questo rovina i miei eventi (non so perché), quindi ho bisogno di liberarmi dello spazio. –

Non hai bisogno di una larghezza di oltre come altezza sull'elemento? Conosco il display: il blocco dovrebbe dargli la larghezza: 100%, ma IE non è così luminoso. Qualcosa cambia se fornisci una larghezza?

fonte

2010-05-27 15:05:44 Tom

In realtà gli do una larghezza in un altro stile. –

Costruzione off di altre osservazioni e le risposte in questa discussione, ho risolto questo problema utilizzando la libreria Prototype:

<div id"dynamically-added-block"> ... </div> 
... 
$("dynamically-added-block").up().show();

Semplicemente, ottenere il genitore e Ri-mostra di esso. Testato su IE8, utilizzando entrambe le modalità Browser: IE8, Modalità documento: IE8 e Modalità browser: IE7, Modalità documento: IE7. Non sono stati testati con la modalità dei capricci temuti.

fonte

2010-06-10 19:31:14

Trovato questo riferimento: http://www.evotech.net/blog/2009/03/ie8-css-support/ Suggerendo che il seguente meta tag è necessaria: –

Il CSS non si applica agli elementi creati dinamicamente in IE 7?

risposta

Problemi correlati