Internet Explorer 9 rendert Tabellenzellen nicht richtig

115

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

fgpx78
quelle
irgendeinen Code? Vielleicht haben Sie irgendwo ein nicht übereinstimmendes Tag?
Naftali aka Neal
Können Sie den HTML-Code mit den IE9 F12-Tools validieren? Sagt Ihnen IE9, in welchem ​​Modus es gerendert wird? Quirks Mode, IE 7, IE 8, IE 9 Standards (Standard), etc ...
Dan Sorensen
IE Blog erwähnt heute ein neues Tool zur Behebung von
Dan Sorensen
Der Code ist wirklich lang, ich glaube nicht, dass das Problem da ist. Mit dem F12-Tool wurde kein Fehler gefunden, und der Rendermodus ist IE9. Ich versuche es mit dem Compat-Inspektor und lasse es Sie wissen;) Ich habe auch nach Tag-Mistmaches gesucht (als erstes habe ich es getan), aber kein Glück
fgpx78
Übrigens habe ich das Problem gefunden: Es scheint, dass ein Javascript-Code vor dem HEAD-Tag das Problem verursacht hat. IE9 scheint nicht gut damit umzugehen, ... es ist ein Problem, da ich damit ein MVC-Problem gelöst habe. Ich bin zurück zum alten :) Vielen Dank an alle.
fgpx78

Antworten:

72

Geben Sie hier die Bildbeschreibung einIch 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);
Shanison
quelle
Diese Lösung hat mein Problem behoben. Es gab mir ein Rätsel, bevor ich diese Lösung fand.
Bearwulf
Der Link ist nicht mehr verfügbar.
Mason240
Es ist noch verfügbar. Sie müssen sich anmelden, um den Inhalt anzuzeigen. Ich habe gerade einen Screenshot gemacht. Sie finden den Screenshot in meiner Antwort
Shanison
Ich habe auch & nbsp; zu den leeren Zellen.
Bakudan
Was ist, wenn Sie nicht von
Ajax
33

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>
Jorge
quelle
Vielen Dank, ich werde es versuchen, wenn das Problem erneut auftritt. Ich bin froh zu wissen, dass ich nicht der einzige bin, der es hat;)
fgpx78
4
Was? (Dies war meine erste Reaktion). Aber es hat funktioniert! Ich danke dir sehr!
Filipa Lacerda
1
Arbeitete für mich Vielen Dank! +1 für Sie
Saurabh Bayani
Sie, Sir, Sie sind großartig! :-)
Satya
Vielen Dank dafür! Das Entfernen aller Leerzeichen zwischen den Start- und End-Tags <td> hat tatsächlich funktioniert.
Frankie Loscavio
14

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.

Ravi Kadaboina
quelle
11

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);
Will Liska
quelle
2

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

Dan Sorensen
quelle
Mit dem Tool konnte nichts gefunden werden. Nur eine Menge Validierungsprobleme, alles aufgrund des Renderns der Aspnet-Engine (fehlendes Ende / für einige Meta- und Link-Tags im Header).
fgpx78
2

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

TAURI
quelle
2

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>
user1207607
quelle
Ich mag diese Lösung. Es ist einfacher, als Leerzeichen zwischen allen Elementen zu entfernen. Außerdem hat es bei mir geklappt :-)
R. Schreurs
2

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

Rish
quelle
1

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!

anneleenw
quelle
0

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.

Vikas Pawar
quelle
0

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.

Arun Pratap Singh
quelle
0

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.

Tom Regan
quelle
0

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;
}
Homer
quelle
-1

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.

dfsq
quelle