HTML 表格在 IE9 中无法正确呈现答案

【问题标题】：HTML table not rendering correctly in IE9HTML 表格在 IE9 中无法正确呈现
【发布时间】：2012-08-23 20:00:17
【问题描述】：

真的很奇怪，这个。

我正在使用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 会这样渲染它，以及我能做些什么来阻止它。

【问题讨论】：

看起来这是一个 HTML/CSS/IE 问题，与 ASP 无关。你有没有机会在 JS Fiddle 中复制这个问题？ (jsfiddle.net)
我已将 HTML 复制到 jsfiddle 中。奇怪的是，它似乎在那里渲染好。
只是一个想法 - IE 是否以 Quirks 模式呈现页面？如果在页面上打开开发者工具，菜单栏右侧的浏览器模式和文档模式是什么？
浏览器模式：IE9。文档模式：IE9标准
由于我没有看到任何 eval() 或任何东西，您实际上是如何将您的值绑定到转发器的？

标签： asp.net vb.net internet-explorer-9 rendering html-table

【解决方案1】：

这似乎是 IE9 在渲染大表时的一个已知错误。删除表格定义开始和结束标记之间的空白时，问题已解决，例如。 </td><td>

MSDN discussion on IE 9 rendering

【讨论】：

+1 我确定这是 IE9 上的一个 BUG。我以前见过这个错误，只有 IE9 表现出这种行为。
+1 真是令人头疼，但解决方案却如此简单（尽管很奇怪）。赏金 - 谢谢！
@Urbycoz，可以把问题的解决方案，因为链接“goo.gl/uhOSk”坏了
如果您在 td 或 th 结束元素之后有注释，请确保和之间没有空格

【解决方案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);
        });
    }
});

【讨论】：

【解决方案3】：

当发生 Click 事件时，我有一个巨大的表格。只在IE9出现过，在IE8、IE10、Chrome等中一切正常。

上述解决方案对我以及其他同类答案都失败了。

我是这样解决的：

我在表格中添加了边框，很明显 HTML 不正确。要么缺少一些 colspan，要么单元格需要&nbsp;，或者可能是任何东西。

我还注意到，现在有了border=1 属性表，点击扩展的问题就消失了。

所以我把一个类xltable放到桌子上，然后把.xltable td {border:0px solid white;}放到我的css中。

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

【讨论】：