Internet Explorer 9 non visualizza correttamente le celle della tabella

Il mio sito web ha sempre funzionato senza problemi con IE8, IE7, FF, Chrome e Safari. Ora lo sto testando su IE9 e sto riscontrando uno strano problema: in alcune pagine, alcuni dati tabulari vengono visualizzati in modo errato.

Il sorgente HTML è corretto e tutto, e la riga che dà il problema cambia ogni volta che aggiorno la pagina (a dire il vero, il problema stesso appare solo in qualche aggiornamento, non in tutti).

Utilizzando lo strumento F12 di IE, la struttura della tabella appare corretta, non dovrebbe esserci un TD vuoto dopo il TD contenente M08000007448, ma viene comunque visualizzato in questo modo.

Inoltre, se utilizzo lo strumento F12, con lo strumento "seleziona elemento per clic" nella barra degli strumenti, e provo a fare clic sullo spazio vuoto tra M08000007448 e 19, seleziona il TR, non un "td nascosto".

Sto riscontrando questo problema di rendering della tabella anche in qualche altra tabella nell'applicazione, qualcuno sta vivendo qualcosa di simile? Succede solo in IE9 :(

Non so se sia importante, ma la pagina è realizzata con ASPNET (webforms) e usa Jquery e qualche altro plugin JS.

Ho provato a salvare la pagina (con immagini) e ad aprirla in locale con IE9, ma il problema non si verifica mai. (Ovviamente ho controllato tutta la struttura della tabella ed è ok. L'header e tutte le righe hanno lo stesso numero di TD, con il giusto numero di colspan quando necessario).

Anch'io ho esattamente lo stesso problema. potresti leggere questo https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Puoi rimuovere lo spazio tra td usando javascript se il tuo html viene restituito da ajax, quindi dalla risposta, lo sostituisci con

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

Ho avuto lo stesso problema esatto popolando una tabella utilizzando modelli jquery. Ho continuato ad avere "ghost" <td>su set di dati più grandi (300+) solo in IE9. Questi <td>spingerebbero le colonne esterne fuori dai confini della mia tabella.

Ho risolto questo problema facendo qualcosa di veramente stupido; rimuovendo tutti gli spazi tra i <td>tag di inizio e di fine e giustificando a sinistra il markup HTML relativo alla mia tabella. Fondamentalmente, vuoi tutto <td> </td>sulla stessa linea, senza spazi.

Esempio:

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

La soluzione fornita da @Shanison aiuta solo parzialmente ma il problema persiste se ci sono spazi tra uno qualsiasi degli altri elementi che possono far parte del modello di contenuto della tabella come thead, th ecc.

Ecco una regex migliore ideata dal mio capo al lavoro.

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

coprendo tutti gli elementi table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Nota: jQuery.browser è stato rimosso in jQuery 1.9 ed è disponibile solo tramite il plug-in jQuery.migrate. Prova invece a utilizzare il rilevamento delle funzionalità.

Ho risolto questo problema rimuovendo lo spazio bianco:

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);

Il blog di IE menziona un nuovo strumento oggi chiamato script Compat Inspector per aiutare a risolvere l'incompatibilità di rendering di IE 9. Potrebbe aiutarti a risolvere il tuo problema.

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

Anch'io avevo quel problema.

Mi è successo che l' attributo di larghezza nei tag td / esimo causasse questo problema.

Modificato in style = "width: XXpx" e il problema è stato risolto :)

Mi sono imbattuto anche in questo problema e mi sono reso conto che è successo quando stavo inserendo direttamente il testo negli <td>elementi. Non sono sicuro se sia uno standard o meno, ma dopo aver avvolto del testo in <span>elementi, i problemi di rendering sono scomparsi.

Quindi invece di:

<td>gibberish</td>

provare:

<td><span>gibberish</span></td>

Trovato uno script molto utile per evitare celle indesiderate nella tabella html durante il rendering.

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

Questa funzione javascript dovresti chiamare quando la pagina viene caricata (cioè evento onload)

Risposta tardiva, ma spero di poter aiutare qualcuno con questo. Ho riscontrato lo stesso problema durante il debug in IE9. La soluzione era rimuovere tutti gli spazi bianchi nel codice HTML. Invece di

<tr> <td>...</td> <td>...</td> </tr>

Ho dovuto fare

<tr><td>...</td><td>...</td></tr>

Questo sembrava risolvere il problema!

Questo è il bug molto grave in IE9. Nel mio caso la rimozione solo degli spazi bianchi tra diversi td non era sufficiente, quindi ho rimosso anche gli spazi tra diversi tr. E funziona bene.

Ho avuto un problema simile con ie-9 durante il rendering della tabella dinamica.

var table = $('<table><tr><td style="width :100"></td></tr></table>');

quando reso si traduce in ...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

funziona perfettamente in ie = 10 chrome safari ...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

devi scrivere 100pxinvece di 100.

Avendo lo stesso problema di formattazione con ie9 e un nuovo problema in ie11 in cui si formatta correttamente ma impiega 25-40 secondi per eseguire il rendering di una tabella di circa 400 righe e 9 colonne. Ha la stessa causa, spazi bianchi all'interno dei tag tr o td.

Sto visualizzando una tabella creata dal rendering di una vista parziale da una chiamata AJAX. Ho deciso di eseguirne il BFH sul server rimuovendo gli spazi bianchi dalla vista parziale renderizzata, utilizzando un metodo pubblicato qui: http://optimizeasp.net/remove-whitespace-from-html

Questa è la sua soluzione copiata in toto:

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

Ed ecco un metodo che restituisce una vista parziale come stringa, rubata da un'altra risposta SO:

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

Ci vuole un po 'di tempo, ma meno di un secondo per eseguire il rendering di una tabella di circa 400 righe, che per i miei scopi è abbastanza buono.

A volte ho avuto questo problema su tabelle generate da Knockout. Nel mio caso l'ho risolto utilizzando la soluzione jQuery trovata qui

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

Ho avuto lo stesso problema con la griglia KendoUI in IE10. Sono stato in grado di forzare IE a rieseguire il rendering delle celle della tabella mancanti con questo hack:

htmlTableElement.appendChild(document.createTextNode(''));

Aggiungendo un textNode vuoto, IE esegue nuovamente il rendering dell'intera tabella.