Internet Explorer 9 tidak merender sel tabel dengan benar

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

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

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>

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.

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

Blog IE menyebutkan alat baru hari ini yang disebut skrip Compat Inspector untuk membantu memecahkan masalah ketidakcocokan rendering IE 9. Ini dapat membantu memecahkan masalah Anda.

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

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

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>

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)

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!

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.

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.

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.

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

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.