HTML表在IE9中无法正确渲染

Question

这是一个非常奇怪的问题。

我正在使用 asp:Repeater 来创建一个 HTML 表格，如下所示：

标记：

<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

这在Firefox和Chrome中显示正常，大部分情况下在IE中也是如此。然而，对于更大的表格（50+行），IE会出现奇怪的问题。它似乎添加了一个空单元格...

但在HTML中没有任何内容-我使用开发者工具进行了检查。错误的行与正确的行具有相同的标记，除了单元格文本。更重要的是，如果我删除错误的行，则上面的那一行也开始显示错误。

请问有人能说出为什么IE会呈现这种情况，并且我该如何阻止它呢？

- Urbycoz

---

看起来这是一个HTML/CSS/IE问题，与ASP无关。您有没有可能在JS Fiddle（http://jsfiddle.net/）中复制该问题？ - Graham Clark

我已将 HTML 复制到 jsfiddle 中。奇怪的是，它在那里似乎可以正常渲染。 - Urbycoz

浏览器模式：IE9。文档模式：IE9标准 - Urbycoz

你是如何将值绑定到repeater上的？我没有看到任何eval()或其他东西。 - Bex

你能展示包含CSS和JS的完整HTML吗？ - Dima

Answer 1

这似乎是IE9在渲染大型表格时已知的错误。当去除表格定义标签之间的空格（例如</td><td>）时，问题得到了解决。

MSDN讨论IE 9的渲染问题

- Richard Vivian

---

+1 我确定这是IE9的一个BUG。我以前见过这个错误，而且只有IE9会表现出这种行为。 - Icarus

+1 真是让人头疼，但解决起来却很简单（虽然有点奇怪）。悬赏已发放 - 谢谢！ - Urbycoz

@Urbycoz，可以提供问题的解决方案吗？因为链接“http://goo.gl/uhOSk”已经失效了。 - andres descalzo

如果您在td或th的闭合元素后面有注释，请确保</td>和<!-- -->之间没有空格。 - dbrin

Answer 2

这是一个已知的IE9问题，您可以通过将以下代码放置在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);
        });
    }
});

- Hamid Tavakoli

Answer 3

我有一个巨大的表格，当点击事件发生时会扩展。这只在IE9中发生，而在IE8、IE10、Chrome等浏览器中都很好。

上述解决方案对我和其他同类答案都无效。

我是这样解决的：

我给表格添加了边框，很明显HTML不正确。可能缺少一些colspan或单元格需要 或其他任何东西。

我还注意到，现在使用表格的border=1属性，点击扩展的问题已经消失了。

所以我给表格加了一个类xltable，并在我的CSS中加入了.xltable td {border:0px solid white;}。

我的代码仍然不“有效”，但它可以工作。

- Petamannen