Internet Explorer 9 nie renderuje poprawnie komórek tabeli

Moja witryna zawsze działała bezproblemowo z przeglądarkami IE8, IE7, FF, Chrome i Safari. Teraz testuję to w IE9 i mam dziwny problem: na niektórych stronach niektóre dane tabelaryczne renderują się nieprawidłowo.

Źródło HTML jest poprawne iw ogóle, a wiersz podający problem zmienia się za każdym razem, gdy odświeżam stronę (prawdę mówiąc, sam problem pojawia się tylko przy pewnym odświeżeniu, nie we wszystkich).

Używając narzędzia F12 w IE, struktura tabeli wydaje się być poprawna, nie powinno być pustego TD po TD zawierającym M08000007448, ale nadal renderuje się w ten sposób.

Ponadto, jeśli używam narzędzia F12 z narzędziem „wybierz element kliknięciem” na pasku narzędzi i spróbuję kliknąć puste miejsce między M08000007448 a 19, wybierze TR, a nie „ukryte td”.

Mam ten problem z renderowaniem tabeli również w innej tabeli w aplikacji, czy ktoś ma coś takiego? Dzieje się tak tylko w IE9 :(

Nie wiem, czy to ważne, ale strona jest tworzona za pomocą ASPNET (formularzy internetowych) i używam Jquery oraz innej wtyczki JS.

Próbowałem zapisać stronę (z obrazami) i otworzyć ją lokalnie za pomocą IE9, ale problem nigdy nie występuje. (Oczywiście sprawdziłem całą strukturę tabeli i jest ok. Nagłówek i wszystkie wiersze mają taką samą liczbę TD, z odpowiednią liczbą colspanów, jeśli to konieczne).

Ja też mam dokładnie ten sam problem. możesz przeczytać to https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

Możesz usunąć spację między td za pomocą javascript, jeśli twój kod HTML jest zwracany z ajax, a następnie z odpowiedzi zamień go na

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

Miałem dokładnie ten sam problem z zapełnianiem tabeli przy użyciu szablonów jQuery. Ciągle miałem "duchy" <td>na większych zbiorach danych (300+) tylko w IE9. To <td>wypchnęłoby zewnętrzne kolumny poza granice mojego stołu.

Naprawiłem to, robiąc coś naprawdę głupiego; usunięcie wszystkich spacji między <td>znacznikami początkowymi i końcowymi i wyjustowanie znaczników HTML odnoszących się do mojej tabeli. Zasadniczo chcesz, aby wszystkie były <td> </td>w tej samej linii, bez spacji.

Przykład:

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

Podane rozwiązanie @Shanison pomaga tylko częściowo, ale problem będzie się powtarzał, jeśli między innymi elementami, które mogą być częścią modelu zawartości tabeli, takimi jak thead, th itp., Są spacje.

Oto lepsze wyrażenie regularne opracowane przez mojego lidera w pracy.

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

obejmujące wszystkie elementy table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Uwaga: jQuery.browser został usunięty w jQuery 1.9 i jest dostępny tylko poprzez wtyczkę jQuery.migrate. Spróbuj zamiast tego użyć wykrywania funkcji.

Rozwiązałem ten problem, usuwając spacje:

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

Blog IE wspomina o nowym narzędziu o nazwie skrypt Compat Inspector, które pomaga w rozwiązywaniu problemów z niekompatybilnością renderowania w IE 9. Może to pomóc w rozwiązaniu problemu.

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

Ja też miałem ten problem.

Okazało się, że ten atrybut szerokości w znacznikach td / th powoduje ten problem.

Zmieniono to na style = "width: XXpx" i problem został rozwiązany :)

Natknąłem się również na ten problem i zdałem sobie sprawę, że stało się to, gdy bezpośrednio wstawiałem tekst do <td>elementów. Nie jestem pewien, czy jest to standard, czy nie, ale po zawinięciu dowolnego tekstu w <span>elementy zniknęły problemy z renderowaniem.

Więc zamiast:

<td>gibberish</td>

próbować:

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

Znalazłem bardzo przydatny skrypt, który zapobiega niechcianym komórkom w tabeli html podczas renderowania.

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

Tę funkcję javascript, którą należy wywołać podczas ładowania strony (np. Zdarzenie onload)

Późna odpowiedź, ale mam nadzieję, że mogę komuś w tym pomóc. Doświadczyłem tego samego problemu podczas debugowania w IE9. Rozwiązaniem było usunięcie wszystkich białych znaków w kodzie HTML. Zamiast

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

musiałem zrobić

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

Wydawało się, że to rozwiązało problem!

To jest bardzo poważny błąd w IE9. W moim przypadku usunięcie tylko białych spacji między różnymi td nie było wystarczające, więc usunąłem również spacje między różnymi tr. I działa dobrze.

Miałem podobny problem z ie-9 podczas renderowania tabeli dynamicznej.

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

po renderowaniu przekłada się na ...

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

działa to idealnie dobrze w 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>

musisz pisać 100pxzamiast 100.

Ten sam problem z formatowaniem w ie9 i nowy problem w ie11, gdzie formatuje się poprawnie, ale renderowanie tabeli zawierającej około 400 wierszy i 9 kolumn zajmuje 25-40 sekund. Ma tę samą przyczynę, białą spację wewnątrz znaczników tr lub td.

Wyświetlam tabelę utworzoną przez renderowanie częściowego widoku z wywołania AJAX. Zdecydowałem się na BFH to na serwerze, usuwając białe znaki z renderowanego częściowego widoku, używając metody zamieszczonej tutaj: http://optimizeasp.net/remove-whitespace-from-html

Oto jego rozwiązanie skopiowane 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();

    }

A oto metoda, która zwraca częściowy widok jako ciąg, skradziony z innej SO odpowiedzi:

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

Wyrenderowanie tabeli zawierającej około 400 wierszy zajmuje trochę czasu, ale mniej niż sekundę, co jest wystarczające do moich celów.

Czasami miałem ten problem na tabelach generowanych przez Knockout. W moim przypadku naprawiłem to za pomocą rozwiązania jQuery znalezionego tutaj

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

Miałem ten sam problem z siatką KendoUI w IE10. Udało mi się zmusić IE do ponownego zwrócenia brakujących komórek tabeli za pomocą tego hacka:

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

Dołączenie pustego textNode powoduje, że IE ponownie wyrenderuje całą tabelę.