Internet Explorer 9 rendert Tabellenzellen nicht richtig

Meine Website lief immer reibungslos mit IE8, IE7, FF, Chrome und Safari. Jetzt teste ich es auf IE9 und habe ein seltsames Problem: Auf einigen Seiten werden einige tabellarische Daten falsch dargestellt.

Die HTML-Quelle ist korrekt und alle, und die Zeile mit dem Problem ändert sich jedes Mal, wenn ich die Seite aktualisiere (um die Wahrheit zu sagen, das Problem selbst tritt nur bei einigen Aktualisierungen auf, nicht bei allen).

Mit dem F12-Tool von IE wird die Tabellenstruktur korrekt angezeigt. Nach dem TD mit M08000007448 sollte kein leerer TD vorhanden sein, aber es wird trotzdem so gerendert.

Wenn ich das F12-Werkzeug mit dem Werkzeug "Element durch Klicken auswählen" in der Symbolleiste verwende und versuche, auf den leeren Bereich zwischen M08000007448 und 19 zu klicken, wird außerdem der TR ausgewählt, kein "versteckter td".

Ich habe dieses Problem beim Rendern von Tabellen auch in einer anderen Tabelle in der Anwendung. Hat jemand so etwas erlebt? Es kommt nur in IE9 vor :(

Ich weiß nicht, ob es wichtig ist, aber die Seite wird mit ASPNET (Webforms) erstellt und verwendet Jquery und ein anderes JS-Plugin.

Ich habe versucht, die Seite (mit Bildern) zu speichern und mit IE9 lokal zu öffnen, aber das Problem tritt nie auf. (Natürlich habe ich die gesamte Tabellenstruktur überprüft und es ist in Ordnung. Header und alle Zeilen haben die gleiche Anzahl von TDs, bei Bedarf die richtige Anzahl von Colspans).

Ich habe auch genau das gleiche Problem. Vielleicht möchten Sie diese https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables lesen

Sie können den Leerzeichen zwischen td mithilfe von Javascript entfernen, wenn Ihr HTML-Code von Ajax zurückgegeben wird. In der Antwort ersetzen Sie ihn durch

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

Ich hatte genau das gleiche Problem beim Auffüllen einer Tabelle mit JQuery-Vorlagen. Ich hatte immer <td>nur in IE9 'Geister' in größeren Datensätzen (300+). Diese <td>würden die äußeren Spalten außerhalb der Grenzen meines Tisches verschieben.

Ich habe das behoben, indem ich etwas wirklich Dummes getan habe. Entfernen aller Leerzeichen zwischen den <td>Start- und End-Tags und Begründen des HTML-Markups für meine Tabelle. Grundsätzlich möchten Sie alle Ihre <td> </td>in der gleichen Zeile, keine Leerzeichen.

Beispiel:

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

Die @ Shison-Lösung hilft nur teilweise, aber das Problem besteht weiterhin, wenn zwischen den anderen Elementen Leerzeichen vorhanden sind, die Teil des Tabelleninhaltsmodells sein können, z. B. thead, th usw.

Hier ist eine bessere Regex, die von meinem Lead bei der Arbeit entwickelt wurde.

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

Abdeckung aller Tabelle, Beschriftung, Colgroup, Col, Tbody, Thead, Tfoot, Tr, Td, Th Elemente.

Hinweis: jQuery.browser wurde in jQuery 1.9 entfernt und ist nur über das Plugin jQuery.migrate verfügbar. Bitte versuchen Sie stattdessen, die Funktionserkennung zu verwenden.

Ich habe dieses Problem behoben, indem ich das Leerzeichen entfernt habe:

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);

IE Blog erwähnt heute ein neues Tool namens Compat Inspector, das bei der Behebung von Inkompatibilitäten beim Rendern von IE 9 hilft. Dies kann zur Behebung Ihres Problems beitragen.

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

Ich hatte auch dieses Problem.

Mir ist aufgefallen, dass dieses width-Attribut in td / th- Tags dieses Problem verursacht.

Es wurde in style = "width: XXpx" geändert und das Problem ist gelöst :)

Ich bin auch auf dieses Problem gestoßen und habe festgestellt, dass es passiert ist, als ich Text direkt in <td>Elemente eingefügt habe. Ich bin nicht sicher, ob es sich um einen Standard handelt oder nicht, aber nach dem Umschließen von Text in <span>Elemente verschwanden die Rendering-Probleme.

Also statt:

<td>gibberish</td>

Versuchen:

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

Es wurde ein sehr nützliches Skript gefunden , um unerwünschte Zellen in Ihrer HTML-Tabelle beim Rendern zu verhindern .

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

Diese Javascript-Funktion sollten Sie beim Laden der Seite aufrufen (dh Onload-Ereignis).

Späte Antwort, aber hoffentlich kann ich jemandem dabei helfen. Beim Debuggen in IE9 trat das gleiche Problem auf. Die Lösung bestand darin, alle Leerzeichen im HTML-Code zu entfernen. Anstatt

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

ich musste es tun

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

Dies schien das Problem zu lösen!

Dies ist der sehr schwerwiegende Fehler in IE9. In meinem Fall war es nicht ausreichend, nur Leerzeichen zwischen verschiedenen td zu entfernen. Deshalb habe ich auch Leerzeichen zwischen verschiedenen tr entfernt. Und es funktioniert gut.

Ich hatte ein ähnliches Problem mit ie-9 beim Rendern einer dynamischen Tabelle.

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

wenn gerendert bedeutet ...

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

Dies funktioniert einwandfrei in dh = 10 Chrom Safari ...

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

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

Sie müssen schreiben 100pxstatt 100.

Das gleiche Formatierungsproblem mit ie9 und ein neues Problem mit ie11, bei dem die Formatierung korrekt ist, das Rendern einer Tabelle mit etwa 400 Zeilen und 9 Spalten jedoch 25 bis 40 Sekunden dauert. Es hat die gleiche Ursache, Leerzeichen innerhalb der tr- oder td-Tags.

Ich zeige eine Tabelle an, die durch Rendern einer Teilansicht aus einem AJAX-Aufruf erstellt wird. Ich habe beschlossen, es auf dem Server zu bFHen, indem ich das Leerzeichen aus der gerenderten Teilansicht entfernt habe. Dabei habe ich eine Methode verwendet, die hier veröffentlicht wurde: http://optimizeasp.net/remove-whitespace-from-html

Dies ist seine Lösung, die vollständig kopiert wurde:

    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();

    }

Und hier ist eine Methode, die eine Teilansicht als Zeichenfolge zurückgibt, die aus einer anderen SO-Antwort gestohlen wurde:

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
        }
    }

Das Rendern einer Tabelle mit etwa 400 Zeilen dauert etwas, dauert aber weniger als eine Sekunde, was für meine Zwecke gut genug ist.

Ich hatte dieses Problem manchmal bei von Knockout generierten Tabellen. In meinem Fall habe ich es mit der hier gefundenen jQuery-Lösung behoben

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;
}

Ich hatte das gleiche Problem mit dem KendoUI-Raster in IE10. Ich konnte den IE zwingen, fehlende Tabellenzellen mit diesem Hack erneut zu rendern:

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

Durch das Anhängen eines leeren Textknotens kann der IE die gesamte Tabelle neu rendern.