Internet Explorer 9 không hiển thị các ô bảng đúng cách

Trang web của tôi luôn chạy trơn tru với IE8, IE7, FF, Chrome và Safari. Bây giờ tôi đang thử nghiệm nó trên IE9 và tôi đang gặp phải một vấn đề lạ: trong một số trang, một số dữ liệu dạng bảng hiển thị không chính xác.

Nguồn HTML là đúng và tất cả, và hàng đưa ra sự cố sẽ thay đổi mỗi khi tôi làm mới trang (nói thật, bản thân sự cố chỉ xuất hiện trong một số lần làm mới, không phải tất cả).

Sử dụng Công cụ F12 của IE, cấu trúc bảng hiển thị đúng, không được có TD trống sau TD chứa M08000007448, nhưng nó vẫn hiển thị như thế này.

Hơn nữa, nếu tôi sử dụng công cụ F12, với công cụ "chọn phần tử bằng cách nhấp" trên thanh công cụ và tôi cố gắng nhấp vào khoảng trống giữa M08000007448 và 19, nó sẽ chọn TR, không phải "td ẩn".

Tôi cũng gặp sự cố kết xuất bảng này trong một số bảng khác trong ứng dụng, có ai gặp phải vấn đề như thế này không? Nó chỉ xảy ra trong IE9 :(

Tôi không biết nó có quan trọng không, nhưng trang được tạo bằng ASPNET (webforms) và sử dụng Jquery và một số plugin JS khác.

Tôi đã cố gắng lưu trang (có hình ảnh) và mở nó bằng IE9, nhưng sự cố không bao giờ xảy ra. (Tất nhiên là tôi đã kiểm tra tất cả cấu trúc bảng và không sao cả. Tiêu đề và tất cả các hàng có cùng số TD, với đúng số colspan khi cần thiết).

Tôi cũng có cùng một vấn đề. bạn có thể muốn đọc https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables này

YOu có thể xóa không gian giữa td bằng cách sử dụng javascript nếu html của bạn được trả về từ ajax, sau đó từ phản hồi, bạn thay thế nó bằng

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

Tôi đã gặp vấn đề chính xác tương tự khi điền một bảng bằng cách sử dụng các mẫu jquery. Tôi tiếp tục gặp 'ma' <td>trên các tập dữ liệu lớn hơn (300+) chỉ trong IE9. Những thứ này <td>sẽ đẩy các cột bên ngoài ra ngoài các giới hạn của bảng của tôi.

Tôi đã sửa điều này bằng cách làm một điều gì đó thực sự ngớ ngẩn; loại bỏ tất cả các khoảng trống làm chắc chắn các <td>thẻ bắt đầu và kết thúc và để lại điều chỉnh đánh dấu HTML liên quan đến bảng của tôi. Về cơ bản, bạn muốn tất cả của bạn <td> </td>trên cùng một dòng, không có khoảng trắng.

Thí dụ:

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

Giải pháp được đưa ra @Shanison chỉ giúp được một phần nhưng vấn đề vẫn tiếp diễn nếu có khoảng trắng giữa bất kỳ phần tử nào khác có thể là một phần của mô hình nội dung bảng như thead, th, v.v.

Đây là một regex tốt hơn do Trưởng nhóm của tôi tại nơi làm việc nghĩ ra.

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

bao gồm tất cả các phần tử table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th.

Lưu ý: jQuery.browser đã bị xóa trong jQuery 1.9 và chỉ khả dụng thông qua plugin jQuery.migrate. Vui lòng thử sử dụng tính năng phát hiện thay thế.

Tôi đã khắc phục sự cố này bằng cách xóa khoảng trắng:

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 đề cập đến một công cụ mới ngày nay được gọi là tập lệnh Compat Inspector để giúp khắc phục sự cố kết xuất IE 9 không tương thích. Nó có thể giúp khắc phục sự cố của bạn.

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

Tôi cũng đang gặp vấn đề đó.

Nó xảy ra với tôi, đó là thuộc tính width trong thẻ td / th gây ra vấn đề này.

Đã thay đổi nó thành style = "width: XXpx" và vấn đề đã được giải quyết :)

Tôi cũng gặp phải vấn đề này và tôi nhận ra rằng nó xảy ra khi tôi đang trực tiếp đưa văn bản vào <td>các phần tử. Tôi không chắc đó có phải là tiêu chuẩn hay không nhưng sau khi gói bất kỳ văn bản nào trong <span>các phần tử, các vấn đề về kết xuất đã biến mất.

Vì vậy, thay vì:

<td>gibberish</td>

thử:

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

Đã tìm thấy một tập lệnh rất hữu ích để ngăn các ô không mong muốn trong bảng html của bạn khi hiển thị.

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

Hàm javascript này bạn nên gọi khi trang tải (tức là sự kiện tải lên)

Câu trả lời muộn, nhưng hy vọng tôi có thể giúp ai đó về điều này. Tôi đã gặp sự cố tương tự khi gỡ lỗi trong IE9. Giải pháp là loại bỏ tất cả các khoảng trắng trong mã HTML. Thay vì

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

tôi phải làm

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

Điều này dường như để giải quyết vấn đề!

Đây là lỗi rất nghiêm trọng trong IE9. Trong trường hợp của tôi, loại bỏ chỉ khoảng trắng giữa các td khác nhau là không đủ, Vì vậy, tôi cũng đã loại bỏ khoảng trắng giữa các tr khác nhau. Và nó đang hoạt động tốt.

Tôi đã gặp sự cố tương tự với ie-9 khi hiển thị bảng động.

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

khi được kết xuất sẽ dịch thành ...

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

điều này hoạt động hoàn toàn tốt trong 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>

bạn cần phải viết 100pxthay vì 100.

Có cùng một vấn đề định dạng với ie9 và một vấn đề mới ở ie11 trong đó nó định dạng chính xác nhưng mất 25-40 giây để hiển thị một bảng gồm khoảng 400 hàng và 9 cột. Nó có cùng nguyên nhân, khoảng trắng bên trong thẻ tr hoặc td.

Tôi đang hiển thị một bảng được tạo bằng cách hiển thị một phần chế độ xem từ lệnh gọi AJAX. Tôi đã quyết định BFH nó trên máy chủ bằng cách xóa khoảng trắng khỏi chế độ xem một phần được hiển thị, sử dụng một phương pháp được đăng tại đây: http://optimizeasp.net/remove-whitespace-from-html

Đây là giải pháp của anh ấy được sao chép trong-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();

    }

Và đây là một phương thức trả về một phần xem dưới dạng chuỗi, bị đánh cắp từ một câu trả lời SO khác:

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

Phải mất một chút thời gian, nhưng chưa đầy một giây để hiển thị một bảng khoảng 400 hàng, đối với mục đích của tôi là đủ tốt.

Đôi khi tôi gặp sự cố này trên các bảng được tạo bởi Knockout. Trong trường hợp của tôi, tôi đã sửa nó bằng giải pháp jQuery được tìm thấy ở đây

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

Tôi đã gặp vấn đề tương tự với lưới KendoUI trong IE10. Tôi đã có thể buộc IE kết xuất các ô trong bảng bị thiếu bằng cách hack này:

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

Việc thêm một TextNode trống làm cho IE kết xuất toàn bộ bảng.