Internet Explorer 9 แสดงเซลล์ตารางไม่ถูกต้อง

เว็บไซต์ของฉันทำงานได้อย่างราบรื่นเสมอกับ IE8, IE7, FF, Chrome และ Safari ตอนนี้ฉันกำลังทดสอบบน IE9 และพบปัญหาแปลก ๆ : ในบางหน้าข้อมูลตารางบางส่วนแสดงผลไม่ถูกต้อง

ซอร์ส HTML ถูกต้องและทั้งหมดและแถวที่ให้ปัญหาจะเปลี่ยนทุกครั้งที่รีเฟรชหน้า (เพื่อบอกความจริงปัญหาจะปรากฏในการรีเฟรชบางส่วนเท่านั้นไม่ใช่ทั้งหมด)

การใช้เครื่องมือ F12 ของ IE โครงสร้างตารางจะถูกต้องไม่ควรมี TD ว่างหลังจาก TD ที่มี M08000007448 แต่ก็ยังแสดงผลเช่นนี้

ยิ่งไปกว่านั้นถ้าฉันใช้เครื่องมือ F12 โดยมีเครื่องมือ "เลือกองค์ประกอบโดยคลิก" ในแถบเครื่องมือและฉันพยายามคลิกที่ช่องว่างระหว่าง M08000007448 และ 19 มันจะเลือก TR ไม่ใช่ "hidden td"

ฉันมีปัญหาการเรนเดอร์ตารางนี้ในตารางอื่น ๆ ในแอปพลิเคชันใครประสบปัญหาเช่นนี้บ้าง? มันเกิดขึ้นเฉพาะใน IE9 :(

ฉันไม่รู้ว่ามันสำคัญหรือเปล่า แต่หน้านี้สร้างด้วย ASPNET (เว็บฟอร์ม) และใช้ Jquery และปลั๊กอิน JS อื่น ๆ

ฉันพยายามบันทึกหน้า (พร้อมรูปภาพ) และเปิดในเครื่องด้วย IE9 แต่ปัญหาไม่เคยเกิดขึ้น (แน่นอนฉันตรวจสอบโครงสร้างตารางทั้งหมดแล้วและก็โอเคส่วนหัวและแถวทั้งหมดมีจำนวน TD เท่ากันโดยมีจำนวน colspan ที่เหมาะสมเมื่อจำเป็น)

ฉันมีปัญหาเดียวกันเช่นกัน คุณอาจต้องการอ่านhttps://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

YOu สามารถลบช่องว่างระหว่าง td โดยใช้ javascript หาก html ของคุณถูกส่งคืนจาก ajax จากนั้นคุณจะแทนที่ด้วย

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

ฉันมีปัญหาเดียวกันกับการเติมข้อมูลในตารางโดยใช้เทมเพลต jquery ฉันยังคงมี 'ผี' <td>อยู่ในชุดข้อมูลขนาดใหญ่ (300+) เฉพาะใน IE9 สิ่งเหล่านี้<td>จะดันคอลัมน์ด้านนอกออกนอกขอบเขตของตารางของฉัน

ฉันแก้ไขสิ่งนี้ด้วยการทำอะไรโง่ ๆ ลบช่องว่างทั้งหมดระหว่าง<td>แท็กเริ่มต้นและแท็กสิ้นสุดและเหลือเพียงแค่กำหนดมาร์กอัป HTML ที่เกี่ยวข้องกับตารางของฉัน โดยทั่วไปคุณต้องการให้ทั้งหมด<td> </td>อยู่ในบรรทัดเดียวกันโดยไม่มีช่องว่าง

ตัวอย่าง:

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

วิธีแก้ปัญหาที่ให้ @Shanison ช่วยได้เพียงบางส่วน แต่ปัญหายังคงมีอยู่หากมีช่องว่างระหว่างองค์ประกอบอื่น ๆ ที่สามารถเป็นส่วนหนึ่งของแบบจำลองเนื้อหาตารางเช่น thead ฯลฯ

นี่คือ regex ที่ดีกว่าที่หัวหน้างานของฉันวางแผนไว้

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

ครอบคลุมทุกตารางคำบรรยายกลุ่มกลุ่ม col, tbody, thead, tfoot, tr, td, th องค์ประกอบ

หมายเหตุ: jQuery.browser ถูกลบออกใน jQuery 1.9 และพร้อมใช้งานผ่านปลั๊กอิน jQuery.migrate เท่านั้น โปรดลองใช้การตรวจหาคุณสมบัติแทน

ฉันแก้ไขปัญหานี้โดยการลบช่องว่าง:

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

IE Blog กล่าวถึงเครื่องมือใหม่ในปัจจุบันที่เรียกว่าสคริปต์ตัวตรวจสอบความเข้ากันได้เพื่อช่วยแก้ไขปัญหาความไม่ลงรอยกันในการแสดงผลของ IE 9 อาจช่วยแก้ปัญหาของคุณได้

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

ฉันก็มีปัญหาเช่นกัน

เกิดขึ้นกับฉันแอตทริบิวต์ widthในแท็กtd / thทำให้เกิดปัญหานี้

เปลี่ยนเป็นstyle = "width: XXpx"และแก้ไขปัญหาได้แล้ว :)

ฉันพบปัญหานี้เช่นกันและฉันตระหนักว่ามันเกิดขึ้นเมื่อฉันใส่ข้อความลงใน<td>องค์ประกอบโดยตรง ฉันไม่แน่ใจว่าเป็นมาตรฐานหรือไม่ แต่หลังจากตัดข้อความใน<span>องค์ประกอบปัญหาการแสดงผลก็หายไป

แทนที่จะเป็น:

<td>gibberish</td>

ลอง:

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

พบสคริปต์ที่มีประโยชน์มากในการป้องกันเซลล์ที่ไม่ต้องการในตาราง html ของคุณขณะแสดงผล

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

ฟังก์ชันจาวาสคริปต์นี้คุณควรเรียกใช้เมื่อเพจโหลด (เช่นเหตุการณ์ onload)

คำตอบช้า แต่หวังว่าฉันจะช่วยใครบางคนได้ ฉันประสบปัญหาเดียวกันเมื่อทำการดีบักใน IE9 วิธีแก้ปัญหาคือการลบช่องว่างทั้งหมดในโค้ด HTML แทน

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

ฉันต้องทำ

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

ดูเหมือนจะแก้ปัญหาได้!

นี่คือบั๊กที่ร้ายแรงมากใน IE9 ในกรณีของฉันการลบเฉพาะช่องว่างสีขาวระหว่าง td ที่แตกต่างกันไม่เพียงพอดังนั้นฉันจึงลบช่องว่างระหว่าง tr ต่างกันด้วย และทำงานได้ดี

ฉันมีปัญหาคล้ายกันกับ ie-9 เมื่อแสดงตารางไดนามิก

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

เมื่อแสดงผลแปลเป็น ...

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

ใช้งานได้ดีอย่างสมบูรณ์ใน 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>

คุณจะต้องเขียนแทน100px100

มีปัญหาการจัดรูปแบบเดียวกันกับ ie9 และปัญหาใหม่ใน ie11 ซึ่งจัดรูปแบบได้อย่างถูกต้อง แต่ใช้เวลา 25-40 วินาทีในการแสดงตารางประมาณ 400 แถวและ 9 คอลัมน์ มีสาเหตุเดียวกันช่องว่างภายในแท็ก tr หรือ td

ฉันกำลังแสดงตารางที่สร้างขึ้นโดยการแสดงผลของมุมมองบางส่วนจากการเรียก AJAX ฉันตัดสินใจที่จะ BFH บนเซิร์ฟเวอร์โดยการลบช่องว่างออกจากมุมมองบางส่วนที่แสดงผลโดยใช้วิธีการโพสต์ที่นี่: http://optimizeasp.net/remove-whitespace-from-html

นี่คือโซลูชันของเขาที่คัดลอกมาใน 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();

    }

และนี่คือวิธีที่ส่งคืนมุมมองบางส่วนเป็นสตริงซึ่งถูกขโมยจากคำตอบ SO อื่น:

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

ใช้เวลาสักครู่ แต่น้อยกว่าหนึ่งวินาทีในการแสดงตารางประมาณ 400 แถวซึ่งสำหรับจุดประสงค์ของฉันก็เพียงพอแล้ว

บางครั้งฉันมีปัญหานี้ในตารางที่สร้างโดย Knockout ในกรณีของฉันฉันแก้ไขโดยใช้โซลูชัน jQuery ที่พบที่นี่

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

ฉันมีปัญหาเดียวกันกับ KendoUI grid ใน IE10 ฉันสามารถบังคับให้ IE แสดงเซลล์ตารางที่หายไปด้วยแฮ็คนี้:

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

การต่อท้าย textNode ว่างทำให้ IE แสดงผลทั้งตาราง