webentwicklung-frage-antwort-db.com.de

Internet Explorer 9 gibt Tabellenzellen nicht ordnungsgemäß wieder

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

Die HTML-Quelle ist korrekt und alles, und die Zeile, die das Problem angibt, ändert sich bei jeder Aktualisierung der Seite (um die Wahrheit zu sagen, das Problem selbst erscheint nur bei einer Aktualisierung, nicht bei allen).

Wenn Sie das F12-Tool von IE verwenden, scheint die Tabellenstruktur korrekt zu sein. Es sollte kein leeres TD nach dem TD mit M08000007448 vorhanden sein, aber es wird immer noch so dargestellt.

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

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

Ich weiß nicht, ob es wichtig ist, aber die Seite wurde mit ASPNET (Webforms) erstellt und verwendet Jquery und einige andere JS-Plugins.

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

115
fgpx78

enter image description hereIch habe genau das gleiche Problem. Sie können diese https://connect.Microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables lesen.

Sie können das Leerzeichen zwischen td entfernen, indem Sie Javascript verwenden, wenn Ihre HTML-Datei von ajax zurückgegeben wird. Dann ersetzen Sie sie in der Antwort mit 

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

Ich hatte genau das gleiche Problem, indem ich eine Tabelle mit Jquery-Vorlagen auffüllte. Ich hatte immer wieder "ghost" <td>s für größere Datensätze (300+) nur in IE9. Diese <td>'s würden die äußeren Spalten außerhalb der Grenzen meiner Tabelle verschieben.

Ich korrigierte das, indem ich etwas wirklich Dummes tat. Entfernen Sie alle Leerzeichen zwischen den <td>-Start- und End-Tags, und richten Sie das HTML-Markup für meine Tabelle aus. Grundsätzlich möchten Sie, dass alle <td></td> in derselben Zeile stehen und keine Leerzeichen enthalten.

Beispiel:

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

Die gegebene Lösung von @Shanison hilft nur teilweise, aber das Problem bleibt bestehen, wenn zwischen den anderen Elementen Leerzeichen vorhanden sind, die Teil des Tabelleninhaltsmodells sein können, wie z.

Hier ist eine bessere Regex, die mein Lead bei der Arbeit entwickelt hat.

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

deckt alle Elemente von tabelle, bildunterschrift, colgroup, col, tbody, thead, tfoot, tr, td, th ab.

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

14
Ravi

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

Ich bin auch auf dieses Problem gestoßen und habe gemerkt, 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 nachdem ein beliebiger Text in <span>-Elemente eingeschlossen wurde, verschwanden die Darstellungsprobleme. 

Also statt:

<td>gibberish</td>

versuchen:

<td><span>gibberish</span></td>
2
user1207607

Ich hatte auch dieses Problem.

Mir ist aufgefallen, dass width attribute in td/th tags dieses Problem verursacht. 

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

2
TAURI

Ich habe 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 (d. H. Onload-Ereignis).

2
Rish

Der IE-Blog erwähnt heute ein neues Tool namens Compat Inspector-Skript, das bei der Behandlung von Inkompatibilität mit IE 9 hilft. Es kann helfen, das Problem zu beheben.

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

2
Dan Sorensen

Späte Antwort, aber hoffentlich kann ich jemandem damit helfen. Die Lösung bestand darin, alle Whitespaces im HTML-Code zu entfernen 

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

Ich musste es tun 

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

Dies schien das Problem zu lösen!

1
anneleenw

Ich hatte dieses Problem manchmal an Tischen, die von Knockout generiert wurden. 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;
}
0
Homer

Dies ist der sehr ernste Fehler in IE9. In meinem Fall reichte es nicht aus, nur weiße Leerzeichen zwischen verschiedenen td zu entfernen. Und es funktioniert gut.

0
Vikas Pawar

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 übersetzt in ...

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

dies funktioniert perfekt in zB = 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>

sie müssen 100px anstelle von 100 schreiben.

0

Dasselbe Formatierungsproblem wie bei ie9 und ein neues Problem bei ie11, bei dem es korrekt formatiert wird, aber 25-40 Sekunden dauert, um eine Tabelle mit etwa 400 Zeilen und 9 Spalten zu rendern. Es hat die gleiche Ursache, Leerzeichen in den Tags tr oder td.

Ich zeige eine Tabelle an, die durch das Rendern einer Teilansicht aus einem AJAX - Aufruf erstellt wird. Ich entschied mich für BFH auf dem Server, indem ich den Whitespace aus der gerenderten Teilansicht entfernte, wobei hier eine Methode verwendet wurde: http://optimizeasp.net/remove-whitespace-from-html

Dies ist seine in-toto kopierte Lösung:

    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 String zurückgibt, die von einer anderen Antwort SO 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
        }
    }

Es dauert etwas Zeit, aber weniger als eine Sekunde, um eine Tabelle mit etwa 400 Zeilen zu rendern, was für meine Zwecke gut genug ist.

0
Tom Regan