Internet Explorer 9 tidak merender sel tabel dengan benar


115

Situs web saya selalu berjalan mulus dengan IE8, IE7, FF, Chrome, dan Safari. Sekarang saya mengujinya di IE9 dan saya mengalami masalah aneh: di beberapa halaman, beberapa data tabel dirender dengan tidak benar.

Sumber HTML benar dan semuanya, dan baris yang memberikan masalah berubah setiap kali saya menyegarkan halaman (sejujurnya, masalah itu sendiri hanya muncul di beberapa penyegaran, tidak semua).

Dengan menggunakan Alat F12 IE, struktur tabel tampak benar, tidak boleh ada TD kosong setelah TD yang berisi M08000007448, tetapi tetap saja dirender seperti ini.

Selain itu, jika saya menggunakan alat F12, dengan alat "pilih elemen dengan klik" di bilah alat, dan saya mencoba mengeklik ruang kosong antara M08000007448 dan 19, ia memilih TR, bukan "td tersembunyi".

Saya mengalami masalah rendering tabel ini juga di beberapa tabel lain dalam aplikasi, ada yang mengalami hal seperti ini? Itu hanya terjadi di IE9 :(

Saya tidak tahu apakah itu penting, tetapi halaman dibuat dengan ASPNET (formulir web) dan menggunakan Jquery dan beberapa plugin JS lainnya.

Saya mencoba untuk menyimpan halaman (dengan gambar) dan membukanya secara lokal dengan IE9, tetapi masalah tidak pernah terjadi. (Tentu saja saya memeriksa semua struktur tabel dan tidak apa-apa. Header dan semua baris memiliki jumlah TD yang sama, dengan jumlah colspan yang tepat jika perlu).


kode apa saja? mungkin Anda memiliki tag yang tidak cocok di suatu tempat?
Naftali alias Neal

Apakah Anda dapat memvalidasi HTML menggunakan alat IE9 F12? Apakah IE9 memberi tahu Anda mode renderingnya? Mode Quirks, IE 7, IE 8, IE 9 Standards (default), dll ...
Dan Sorensen

Blog IE menyebutkan alat baru hari ini untuk membantu memecahkan masalah ketidakcocokan IE 9: blogs.msdn.com/b/ie/archive/2011/04/27/…
Dan Sorensen

Kode ini sangat panjang, saya rasa masalahnya bukan di sana. Tidak ada kesalahan yang ditemukan dengan alat F12, dan mode rendering adalah IE9. Saya mencoba inspektur Compat dan memberi tahu Anda;) Saya juga memeriksa kesalahan tag tag (hal pertama yang saya lakukan) tetapi tidak berhasil
fgpx78

BTW, saya menemukan masalah: tampaknya beberapa kode javascript sebelum tag HEAD yang menyebabkan masalah. IE9 tampaknya tidak menanganinya dengan baik, ... itu masalah karena saya mengalami masalah MVC melakukannya .. Saya kembali ke yang lama :) Terima kasih semua.
fgpx78

Jawaban:


72

masukkan deskripsi gambar di siniSaya juga memiliki masalah yang persis sama. Anda mungkin ingin membaca https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables ini

Anda dapat menghapus spasi di antara td dengan menggunakan javascript jika html Anda dikembalikan dari ajax, kemudian dari respon, Anda menggantinya dengan

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

Solusi ini memperbaiki masalah saya. Ini memberi saya teka-teki sebelum saya menemukan solusi ini.
Bearwulf

Tautan tidak lagi tersedia.
Mason240

Itu masih tersedia. Anda harus masuk untuk melihat isinya. Saya baru saja mengambil screenshot. Anda dapat menemukan tangkapan layar di jawaban saya
Shanison

Saya juga menambahkan & nbsp; ke sel kosong.
Bakudan

bagaimana jika Anda tidak kembali dari ajax melainkan melalui tampilan parsial
leora

33

Saya memiliki masalah yang sama persis saat mengisi tabel menggunakan template jquery. Saya terus mengalami 'hantu' <td>pada dataset yang lebih besar (300+) hanya di IE9. Ini <td>akan mendorong kolom luar di luar batas tabel saya.

Saya memperbaikinya dengan melakukan sesuatu yang sangat konyol; menghapus semua spasi antara <td>tag awal dan akhir dan kiri membenarkan markup HTML yang berkaitan dengan tabel saya. Pada dasarnya, Anda ingin semua <td> </td>berada di baris yang sama, tanpa spasi.

Contoh:

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

Terima kasih, saya akan mencobanya jika masalah terjadi lagi. Senang mengetahui bahwa saya bukan satu-satunya yang memilikinya;)
fgpx78

4
apa? (ini adalah reaksi pertama saya). Tapi itu berhasil! Terima kasih banyak!
Filipa Lacerda

1
Bekerja untuk saya Terima kasih banyak! +1 untuk Anda
Saurabh Bayani

Anda tuan, Anda luar biasa! :-)
Satya

Terima kasih banyak untuk ini! Menghapus semua spasi antara tag awal dan akhir <td> sebenarnya berhasil.
Frankie Loscavio

14

Solusi yang diberikan @Shanison hanya membantu sebagian tetapi masalah tetap ada jika ada spasi di antara elemen lain yang dapat menjadi bagian dari model konten tabel seperti thead, th dll.

Berikut adalah ekspresi reguler yang lebih baik yang dibuat oleh Pimpinan saya di tempat kerja.

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

yang mencakup semua tabel, caption, colgroup, col, tbody, thead, tfoot, tr, td, th elemen.

Catatan: jQuery.browser telah dihapus di jQuery 1.9 dan hanya tersedia melalui plugin jQuery.migrate. Silakan coba gunakan deteksi fitur sebagai gantinya.


11

Saya memperbaiki masalah ini dengan menghapus spasi:

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


2

Saya juga mengalami masalah itu.

Terpikir oleh saya, bahwa atribut lebar di tag td / th menyebabkan masalah ini.

Mengubahnya menjadi style = "width: XXpx" dan masalah terselesaikan :)


2

Saya mengalami masalah ini juga dan saya menyadari bahwa itu terjadi ketika saya langsung memasukkan teks ke dalam <td>elemen. Saya tidak yakin apakah itu standar atau tidak tetapi setelah membungkus teks apa pun dalam <span>elemen, masalah rendering menghilang.

Jadi, alih-alih:

<td>gibberish</td>

mencoba:

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

Saya suka solusi ini. Ini lebih lurus ke depan daripada menghilangkan ruang putih dari antara semua elemen. Selain itu, ini berhasil untuk saya :-)
R. Schreurs

2

Menemukan skrip yang sangat berguna untuk mencegah sel yang tidak diinginkan di tabel html Anda saat rendering.

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

Fungsi javascript ini harus Anda panggil saat halaman dimuat (yaitu, peristiwa saat memuat)


1

Jawaban terlambat, tapi semoga saya dapat membantu seseorang dengan ini. Saya mengalami masalah yang sama saat men-debug di IE9. Solusinya adalah menghapus semua spasi dalam kode HTML. Dari pada

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

saya harus melakukan

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

Ini sepertinya menyelesaikan masalah!


0

Ini adalah bug yang sangat serius di IE9. Dalam kasus saya menghapus hanya spasi putih antara td berbeda tidak cukup, jadi saya telah menghapus spasi antara tr yang berbeda juga. Dan itu bekerja dengan baik.


0

Saya memiliki masalah yang sama dengan ie-9 saat merender tabel dinamis.

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

ketika diterjemahkan diterjemahkan menjadi ...

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

ini berfungsi dengan baik di 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>

Anda perlu menulis, 100pxbukan 100.


0

Memiliki masalah pemformatan yang sama dengan ie9, dan masalah baru di ie11 yang memformat dengan benar tetapi membutuhkan waktu 25-40 detik untuk membuat tabel dengan sekitar 400 baris dan 9 kolom. Ini memiliki penyebab yang sama, spasi di dalam tag tr atau td.

Saya menampilkan tabel yang dibuat dengan rendering tampilan parsial dari panggilan AJAX. Saya memutuskan untuk BFH di server dengan menghapus spasi dari tampilan parsial yang diberikan, menggunakan metode yang diposting di sini: http://optimizeasp.net/remove-whitespace-from-html

Ini solusinya disalin di-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();

    }

Dan berikut adalah metode yang mengembalikan tampilan parsial sebagai string, dicuri dari jawaban SO lain:

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

Butuh sedikit waktu, tetapi kurang dari satu detik untuk membuat tabel sekitar 400 baris, yang menurut saya cukup baik.


0

Saya terkadang mengalami masalah ini pada tabel yang dihasilkan oleh Knockout. Dalam kasus saya, saya memperbaikinya menggunakan solusi jQuery yang ditemukan di sini

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

-1

Saya memiliki masalah yang sama dengan kisi KendoUI di IE10. Saya dapat memaksa IE untuk merender sel tabel yang hilang dengan peretasan ini:

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

Menambahkan textNode kosong membuat IE merender ulang seluruh tabel.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.