Tablica HTML nie wyświetla się poprawnie w IE9

Question

Naprawdę dziwna, ta.

Używam asp:Repeater aby utworzyć tabelę HTML, tak jak poniżej:

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 

Wyświetla grzywna w Firefoksie i Chrome, a przez większość czasu w IE. Jednak czasami dla większych tabel (50+ rzędów) IE zachowuje się dziwnie. Wydaje się, aby dodać pustą komórkę ...

... ale nie ma nic w formacie HTML I zostały sprawdzone za pomocą narzędzi programistycznych. Niepoprawny wiersz ma identyczny znacznik do właściwych wierszy, z wyjątkiem tekstu komórki. Co więcej, jeśli usunę niepoprawny wiersz, powyższy zacznie wyświetlać błędnie.

Czy ktoś może zasugerować, dlaczego na Ziemi IE renderuje go w ten sposób i co mogę zrobić, aby go zatrzymać.

Answer 1

Wydaje się, że jest to znany błąd w IE9 w renderowaniu dużych tabel. Problem został rozwiązany przy usuwaniu białych znaków między tagami otwierania i zamykania tabel, np. </td><td>

MSDN discussion on IE 9 rendering

Answer 2

To znany IE9 problem można rozwiązać ten problem, umieszczając poniższy kod gdzieś na stronie HTML:

$(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

miałem ogromny stół, który rozszerzoną gdy zdarzenie click wystąpił. Stało się tylko w IE9, wszystko było w porządku w IE8, IE10, Chrome itp.

Powyższe rozwiązanie nie dla mnie, a także inne odpowiedzi tego samego rodzaju.

Rozwiązałem to w ten sposób:

I dodaną granice do stołu i było jasne, że HTML nie była prawidłowa. Albo brakowało jakiegoś colspana, albo komórki potrzebowały   lub mogły być cokolwiek.

Zauważyłem również, że teraz, z atrybutem tabele border=1, problem z rozwinięciem Click zniknął.

Dlatego umieszczam klasę xltable na stole i umieszczam .xltable td {border:0px solid white;} w moim css.

Mój kod nadal nie jest "prawidłowy", ale działa.