Internet Explorer 9 nie renderuje poprawnie komórek tabeli

115

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

fgpx78
źródło
jakiś kod? może masz gdzieś niedopasowany tag?
Naftali aka Neal
Czy jesteś w stanie zweryfikować kod HTML za pomocą narzędzi IE9 F12? Czy IE9 informuje, w jakim trybie renderuje? Tryb dziwactwa, IE 7, IE 8, Standardy IE 9 (domyślne), itp ...
Dan Sorensen
Blog IE wspomina dziś o nowym narzędziu pomagającym rozwiązywać problemy z niekompatybilnością IE 9: blogs.msdn.com/b/ie/archive/2011/04/27/…
Dan Sorensen
Kod jest naprawdę długi, nie sądzę, że w tym problem. Nie znaleziono błędu w narzędziu F12, a tryb renderowania to IE9. Staram inspektora Compat i poinformować;) Sprawdziłam także mistmaches znaczników (pierwszą rzeczą, jaką zrobił), ale nie ma szczęścia
fgpx78
Przy okazji, znalazłem problem: wygląda na to, że problem powodował kod JavaScript sprzed tagu HEAD. IE9 chyba nie radzi sobie z tym dobrze, ... jest to problem, ponieważ rozwiązałem problem z MVC, robiąc to .. Wróciłem do starego :) Dziękuję wszystkim.
fgpx78

Odpowiedzi:

72

wprowadź opis obrazu tutajJa 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);
Shanison
źródło
To rozwiązanie rozwiązało mój problem. Dało mi to spokój, zanim znalazłem to rozwiązanie.
Bearwulf
Link nie jest już dostępny.
Mason240,
Jest nadal dostępny. Aby zobaczyć zawartość, musisz się zalogować. Właśnie zrobiłem zrzuty ekranu. Zrzut ekranu można znaleźć w mojej odpowiedzi
Shanison
Dodałem też & nbsp; do pustych komórek.
Bakudan,
co, jeśli nie
wracasz z Ajax,
33

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>
Jorge
źródło
Dziękuję, spróbuję, jeśli problem znowu się pojawi. Cieszę się, że nie jestem jedyną osobą, która to ma;)
fgpx78
4
co? (to była moja pierwsza reakcja). Ale zadziałało! Dziękuję bardzo!
Filipa Lacerda,
1
Pracował dla mnie Dziękuję bardzo! +1 dla Ciebie
Saurabh Bayani
Pan jest niesamowity! :-)
Satya
Bardzo dziękuję za to! Usunięcie wszystkich spacji między znacznikami początkowymi i końcowymi <td> w rzeczywistości zadziałało.
Frankie Loscavio
14

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.

Ravi Kadaboina
źródło
11

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);
Will Liska
źródło
2

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

Dan Sorensen
źródło
Nie udało się znaleźć niczego za pomocą narzędzia. Tylko wiele problemów z walidacją, wszystko z powodu renderowania silnika ASPNET (brak końca / dla niektórych meta i tagu linku w nagłówku).
fgpx78
2

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

TAURI
źródło
2

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>
user1207607
źródło
Podoba mi się to rozwiązanie. Jest to prostsze niż usuwanie odstępów między wszystkimi elementami. Poza tym mi się udało :-)
R. Schreurs
2

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)

Rish
źródło
1

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!

anneleenw
źródło
0

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.

Vikas Pawar
źródło
0

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.

Arun Pratap Singh
źródło
0

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.

Tom Regan
źródło
0

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;
}
Homer
źródło
-1

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

dfsq
źródło