Bảng HTML không hiển thị chính xác trong IE9

Question

Thực sự lạ, điều này.

Tôi đang sử dụng một asp:Repeater để tạo ra một bảng HTML, như vậy:

Markup:

<asp:Repeater ID="myRpt" runat="server"> 
    <HeaderTemplate> 
     <table id="myGrd" border="0" style="cursor:pointer;width:100%; background-color:white;" cellpadding="2" cellspacing="0"> 
      <tbody> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <tr onclick="criteria.rowClicked(this);"> 
      <td style="border:solid 1px black;"> 
       <asp:Literal ID="lblName" runat="server"></asp:Literal> 
      </td> 
      <td style="border:solid 1px black;width:200px;"> 
       <asp:Literal ID="lblRange" runat="server"></asp:Literal> 
      </td> 

      <td style="display:none;" > 
       <asp:Literal ID="lblMisc" runat="server"></asp:Literal> 
      </td> 
     </tr> 
    </ItemTemplate> 
    <FooterTemplate> 
     </tbody> </table> 
    </FooterTemplate> 
</asp:Repeater> 

VB:

Public Sub populateGrid(ByVal ds As DataSet) 
     'ds is just made from a simple select query 
     myRpt.DataSource = ds 
     myRpt.DataBind() 
    End Sub 

Private Sub myRpt_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles myRpt.ItemDataBound 
     If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then 
      Dim lblName As Literal = e.Item.FindControl("lblName") 
      Dim lblRange As Literal = e.Item.FindControl("lblRange") 
      Dim lblMisc As Literal = e.Item.FindControl("lblMisc") 

      lblName.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Name")) & "</font>" 
      lblRange.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Range")) & "</font>" 
      lblMisc.Text = "<font style='font-size:10pt; font-family:arial;'>" & Trim(e.Item.DataItem("Miscellaneous")) & "</font>" 
     End If 
    End Sub 

này hiển thị tốt trong Firefox và Chrome, và phần lớn thời gian trong IE. Tuy nhiên đôi khi cho các bảng lớn hơn (50+ hàng) IE hoạt động lạ lùng. Nó xuất hiện thêm một ô trống ...

... nhưng không có gì trong HTML- Tôi đã kiểm tra bằng cách sử dụng công cụ phát triển là. Hàng không chính xác có đánh dấu giống hệt với hàng chính xác, ngoại trừ văn bản ô. Hơn nữa, nếu tôi xóa hàng không chính xác, hàng bên trên nó bắt đầu hiển thị sai.

Xin vui lòng ai đó có thể đề xuất lý do tại sao trên IE đang hiển thị như thế này và tôi có thể làm gì để ngăn chặn điều đó.

Answer 1

Điều này có vẻ là một lỗi đã biết với IE9 khi hiển thị các bảng lớn. Vấn đề đã được giải quyết khi loại bỏ khoảng trắng giữa các thẻ mở và đóng thẻ ví dụ như. </td><td>

MSDN discussion on IE 9 rendering

Answer 2

Đây là một vấn đề IE9 được biết đến, bạn có thể khắc phục điều này bằng cách đặt đoạn mã sau ở đâu đó trong trang HTML của bạn:

$(function() { 
    var browser = $.browser; 
    if (browser.msie && browser.version.slice(0,3) == "9.0") { 
     $('table').each(function(index) { 
       var replace = $(this).html().replace(/td>\s+<td/g,'td><td'); 
       $(this).html(replace); 
     }); 
    } 
}); 

Answer 3

tôi đã có một bảng rất lớn mà mở rộng khi một sự kiện Click xảy ra. Chỉ xảy ra trong IE9, tất cả đều tốt trong IE8, IE10, Chrome, v.v.

Giải pháp trên không thành công đối với tôi, cũng như các câu trả lời khác cùng loại.

Tôi đã giải quyết theo cách này:

Tôi đã thêm đường viền vào bảng và rõ ràng là HTML không chính xác. Hoặc một số colspan đã bị mất hoặc các tế bào cần thiết   hoặc có thể có được bất cứ điều gì.

Tôi cũng nhận thấy rằng bây giờ, với các thuộc tính bảng border=1, sự cố khi mở rộng Nhấp chuột đã biến mất.

Vì vậy, tôi đặt một lớp xltable vào bảng và đặt .xltable td {border:0px solid white;} trong css của tôi.

Mã của tôi vẫn không "hợp lệ" nhưng mã hoạt động.