La tabella HTML non viene visualizzata correttamente in IE9

Question

Davvero strano, questo.

sto usando un asp:Repeater per creare una tabella HTML, in questo modo:

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 

Questa mostra bene in Firefox e Chrome, e la maggior parte del tempo in IE. Tuttavia a volte per tabelle più grandi (oltre 50 righe) IE si comporta in modo strano. Sembra di aggiungere una cella vuota ...

... ma non c'è niente nella HTML- Ho controllato utilizzando gli strumenti di sviluppo. La riga errata ha una marcatura identica alle righe corrette, ad eccezione del testo della cella. Inoltre, se elimino la riga errata, quella in alto inizia a mostrare invece un'alternativa errata.

Per favore qualcuno può suggerire perché IE lo sta rendendo in questo modo e cosa posso fare per fermarlo.

Answer 1

Questo sembra essere un bug noto con IE9 sul rendering di tabelle di grandi dimensioni. Il problema è stato risolto rimuovendo lo spazio bianco tra i tag di apertura e chiusura della tabella es. </td><td>

MSDN discussion on IE 9 rendering

Answer 2

questo è un problema IE9 noto, è possibile risolvere questo mettendo il seguente codice da qualche parte nella tua pagina 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

Ho avuto un enorme tavolo che si è espansa quando un evento Click si è verificato. Successo solo in IE9, tutto andava bene in IE8, IE10, Chrome ecc.

La soluzione di cui sopra non ha funzionato per me, così come altre risposte dello stesso tipo.

ho risolto in questo modo:

ho aggiunto i confini al tavolo ed era chiaro che il codice HTML non era corretta. O mancava un po 'di colspan o le celle avevano bisogno di   o avrebbero potuto essere qualsiasi cosa.

Inoltre ho notato che ora, con l'attributo border=1 delle tabelle, il problema con l'espandibilità dei clic era scomparso.

Quindi ho messo una classe xltable sul tavolo e ho inserito .xltable td {border:0px solid white;} nel mio css.

Il mio codice non è ancora "valido" ma funziona.