Bảng IE9 có các hàng ngẫu nhiên được bù trừ tại các cột ngẫu nhiên

Question

Tôi có một trang danh mục, khi người dùng nhấp vào một, các mục trong danh mục đó được tải thông qua cuộc gọi jQuery Ajax, trong bảng và bị kẹt vào một phần tử bên dưới danh mục. Điều gì dường như xảy ra mặc dù, là một hoặc hai hàng trong bảng được nạp, sẽ có dữ liệu bù đắp của nó tại một cột ngẫu nhiên. Tôi đã thử nghiệm điều này trong IE9, FF 3.6 và Chrome 13. CHỈ này dường như xảy ra trong IE9. Dữ liệu dạng bảng được định dạng hoàn hảo - Tôi đã sử dụng Fiddler để chặn các yêu cầu và sau đó xem xét html thô, và không có gì sai với nó.

Trang web được xây dựng trong ASP.NET MVC3. Bảng được trả về thông qua yêu cầu Ajax trả về một phần xem Razor. Điều này đã làm việc trong IE, thật không may. Tôi thực sự hy vọng ai đó có một lời giải thích cho việc này.

Dưới đây là một ví dụ: Và khác:

EDIT [2012/03/25]: Ứng dụng này đã rời tay tôi, vì vậy tôi không thể xác minh mà các câu trả lời làm việc. Liên kết mà Adam Youngers đăng lên http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 dường như có một số giải pháp khả thi. Từ kinh nghiệm quá khứ, tôi sẽ cố gắng những tùy chọn đầu tiên ..

1. Thêm < meta http-equiv = "X-UA-Tương thích" content = "IE = 8"/> tới phần tử đầu của trang.
2. Cố gắng xóa bất kỳ khoảng trắng nào giữa các ô bảng. Ví dụ. "</td > <td>", thay vì bắt đầu ô tiếp theo trên một dòng mới. (Điều này đã gây ra các vấn đề khoảng cách xa lạ đối với tôi trong quá khứ)

Answer 1

Vấn đề có vẻ là với khoảng cách trắng.

Tôi tìm thấy câu trả lời này trên http://social.msdn.microsoft.com/Forums/en-AU/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90

Thay html bạn nhận được từ các cuộc gọi AJAX sử dụng một biểu thức chính quy như thế này.

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g'); 
tableHtml = tableHtml.replace(expr, '><'); 

Answer 2

Tôi đã sử dụng câu trả lời từ bài đăng khác Remove whitespace and line breaks between HTML elements using jQuery nơi có tập lệnh hiệu quả hơn đoạn mã trên. Tôi đã sử dụng các answer để giải quyết nó, nhưng tôi sẽ lặp lại nó cho một câu trả lời hoàn chỉnh.

jQuery.fn.htmlClean = function() { 
    this.contents().filter(function() { 
     if (this.nodeType != 3) { 
      $(this).htmlClean(); 
      return false; 
     } 
     else { 
      return !/\S/.test(this.nodeValue); 
     } 
    }).remove(); 
    return this; 
} 

Cuối cùng, đây chỉ là giải pháp tạm thời và nên được sửa trong IE9/10 của Microsoft.

Answer 3

Giải pháp cho @Johann Strydom hoạt động nhưng nếu bạn không muốn chạm vào mọi phần tử và chỉ tập trung vào mô hình nội dung bảng.

Dưới đây là một regex tốt hơn được đưa ra bởi khách hàng tiềm năng của tôi tại nơi làm việc.

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 bảng, chú thích, colgroup, col, tbody, thead, tfoot, tr, td, th elements.

Answer 4

Làm theo các đề xuất của Krummelz, thêm <meta http-equiv="X-UA-Compatible" content="IE=8" /> làm cho sự cố không còn nữa.

Đối với vấn đề cụ thể của tôi, tôi có một datepicker jquery và nhãn thường xuyên hiển thị chính xác trong IE9 nhưng sau khi một cuộc gọi jquery ajax sẽ được chuyển xuống dữ liệu. Đặt thẻ ở trên sẽ sửa nó cho tôi. Lần thử thách này thật có giá trị. Chúc may mắn.

Answer 5

Khoảng cách trắng cũng là vấn đề của tôi, mặc dù tình hình của tôi hơi khác một chút. Chủ đề này đã giúp tôi khắc phục sự cố (Cảm ơn tất cả).

Bảng của tôi sẽ ổn, sau đó thêm ngẫu nhiên một cột ra khỏi hư không sau khi đăng lại. Đây là mã của tôi trước và sau:

Trước: (i có khoảng 10 người khác được định dạng theo cùng một cách không gây ra vấn đề này, nhưng điều này một lần)

<tr> 
    <th class="width125px th-left-borders"> 
     Intangibles 
    </th> 
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
      CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox> 
    </td> 
</tr> 

Sau: (loại bỏ các dòng vi phạm thường tốt, nhưng vì một lý do nào đó điều này gây ra sự cố)

<tr> 
    <th class="width125px th-left-borders">Intangibles</th> 
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
      CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox></td> 
</tr> 

Hy vọng điều này cũng sẽ giúp người khác.