HTML-Tabelle nicht korrekt in IE9

Question

Rendern wirklich seltsam, dies.

Ich verwende eine asp:Repeater eine HTML-Tabelle zu erstellen, etwa so:

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 

Dies zeigt in Firefox und Chrome und die meiste Zeit in IE. Allerdings verhält sich IE manchmal bei größeren Tabellen (50+ Zeilen) merkwürdig. Es erscheint eine leere Zelle ...

... hinzuzufügen, aber es gibt nichts in der HTML- ich eingecheckt haben die Entwickler-Tools. Die falsche Zeile hat bis auf den Zellentext ein identisches Markup zu den richtigen Zeilen. Wenn ich die falsche Zeile lösche, wird stattdessen die falsche angezeigt.

Bitte kann jemand vorschlagen, warum in der Welt IE macht es so, und was ich tun kann, um es zu stoppen.

Answer 1

Dies scheint ein bekannter Fehler mit IE9 beim Rendern großer Tabellen zu sein. Das Problem wurde gelöst, wenn Leerraum zwischen Tabellen-öffnenden und schließenden Tags entfernt wurde, z. </td><td>

MSDN discussion on IE 9 rendering

Answer 2

Dies ist ein bekanntes IE9 Problem, Sie können dieses Problem beheben, indem Sie den folgenden Code irgendwo in Ihrer HTML-Seite setzen:

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

hatte ich einen großen Tisch, wenn ein Ereignis ein Klick erweitert aufgetreten. Passiert nur in IE9, alles war gut in IE8, IE10, Chrome usw.

Die obige Lösung scheiterte für mich, sowie andere Antworten der gleichen Art.

ich es auf diese Weise gelöst:

I Grenzen der Tabelle hinzugefügt, und es war klar, dass die HTML nicht korrekt war. Entweder fehlte etwas Colspan oder die Zellen benötigten   oder konnten irgendetwas sein.

Ich bemerkte auch, dass jetzt, mit den Tabellen border=1 Attribut, das Problem mit der Click-Erweiterung war weg.

Also legte ich eine Klasse xltable auf den Tisch und legte .xltable td {border:0px solid white;} in meinem CSS.

Mein Code ist immer noch nicht "gültig", aber es funktioniert.