La tabla HTML no se representa correctamente en IE9

Question

Realmente raro, esto.

estoy usando un asp:Repeater para crear una tabla HTML, así:

de marcado:

<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 

Esto muestra bien en Firefox y Chrome, y la mayoría de las veces en IE. Sin embargo, a veces, para tablas más grandes (más de 50 filas) IE se comporta de manera extraña. Parece que añadir una celda en blanco ...

... pero no hay nada en el en HTML He comprobado el uso de las herramientas de desarrollo. La fila incorrecta tiene marcado idéntico a las filas correctas, a excepción del texto de la celda. Es más, si borro la fila incorrecta, la que está arriba comienza a mostrar mal.

Por favor alguien puede sugerir por qué demonios IE lo está renderizando así, y qué puedo hacer para detenerlo.

Answer 1

Esto parece ser un error conocido con IE9 en la representación de tablas grandes. El problema se resolvió al eliminar el espacio en blanco entre las etiquetas de apertura y cierre de la tabla, por ejemplo. </td><td>

MSDN discussion on IE 9 rendering

Answer 2

Éste es un problema IE9 conocido, puede solucionar este problema poniendo el siguiente código en algún lugar de su página 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

que tenía una enorme mesa que se expandió cuando un evento Click ocurrió. Sucedió solo en IE9, todo estuvo bien en IE8, IE10, Chrome, etc.

La solución anterior falló para mí, al igual que otras respuestas del mismo tipo.

He resuelto de esta manera:

que añade las fronteras a la mesa y estaba claro que el HTML no era correcta. O faltaba algún colspan o las celdas necesitaban   o podía haber sido cualquier cosa.

También noté que ahora, con el atributo de tablas border=1, el problema con la expansión de clics había desaparecido.

Así que puse una clase xltable en la tabla y puse .xltable td {border:0px solid white;} en mi CSS.

Mi código todavía no es "válido", pero funciona.