Internet Explorer 9无法正确呈现表格单元格

我的网站一直使用IE8，IE7，FF，Chrome和Safari顺利运行。现在，我正在IE9上对其进行测试，遇到一个奇怪的问题：在某些页面中，某些表格数据呈现不正确。

HTML源代码正确无误，并且每次刷新页面时，给出问题的行都会更改（说实话，问题本身仅在刷新时出现，并非全部出现）。

使用IE的F12工具，表结构看起来正确，包含M08000007448的TD之后应该没有空的TD，但是仍然呈现这种形式。

此外，如果我使用F12工具，并在工具栏中使用“通过单击选择元素”工具，并且尝试单击M08000007448与19之间的空白，它将选择TR，而不是“隐藏的td”。

我在应用程序的其他某些表中也遇到了表渲染问题，有人遇到过这种情况吗？它仅在IE9中发生：(

我不知道它是否重要，但是该页面是使用ASPNET（网络表单）制作的，并使用Jquery和其他一些JS插件。

我试图保存该页面（带有图像）并使用IE9在本地打开它，但问题从未发生。（当然，我检查了所有的表结构，没关系。页眉和所有行的TD数实际上相同，必要时使用正确的colspan数）。

我也有完全一样的问题。您可能需要阅读此https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

如果您的html是从ajax返回的，则可以使用javascript删除td之间的空格，然后从响应中将其替换为

response_html = response_html.replace(/td>\s+<td/g,'td><td');
$('#table').html(response_html);

我在使用jquery模板填充表时遇到了同样的问题。<td>仅在IE9中，我一直在较大的数据集（超过300个）上使用'ghost' 。这些<td>将把外部列推到表的边界之外。

我通过做一些愚蠢的事情来解决这个问题。删除<td>开始标签和结束标签之间的所有空格，然后对齐与我的表格有关的HTML标记。基本上，您希望所有人都<td> </td>在同一行上，没有空格。

例：

<table>
<tr class="grid_customer_normal">
<td>${primary}</td>
<td>${secondary}</td>
<td>${phone}</td>
<td>${address}</td>
</tr>
</table>

@Shanison给出的解决方案仅能部分解决问题，但如果其他任何元素（例如thead，th等）可以作为表内容模型的一部分，则问题仍然存在。

这是我的主管在工作中设计的更好的正则表达式。

if (jQuery.browser.msie && jQuery.browser.version === '9.0')
{
    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');
}

涵盖所有表格，标题，colgroup，col，tbody，thead，tfoot，tr，td和th元素。

注意：jQuery.browser已在jQuery 1.9中删除，仅可通过jQuery.migrate插件使用。请尝试使用功能检测。

我通过删除空格解决了此问题：

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
var response_html_fixed = data.replace(expr, '><'); //A disgusting hack for ie9. Removes space between open and close <td> tags
$('#treegrid-data').replaceWith(response_html_fixed);

IE博客今天提到了一个名为Compat Inspector脚本的新工具，可以帮助解决IE 9渲染不兼容的问题。它可能有助于解决您的问题。

http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx

我也有这个问题。

它发生在我，那width属性的TD /次标签causng这个问题。

将其更改为style =“ width：XXpx”，问题已解决:)

我也遇到了这个问题，我意识到这是在我直接将文本放入<td>元素中时发生的。我不确定这是否是标准，但是在将任何文本包装在<span>元素中之后，渲染问题就消失了。

所以代替：

<td>gibberish</td>

尝试：

<td><span>gibberish</span></td>

找到了一个非常有用的脚本，可防止渲染时html表中不必要的单元格。

function removeWhiteSpaces()
{
   $('#myTable').html(function(i, el) {
      return el.replace(/>\s*</g, '><');
   });
}

页面加载时（即onload事件），您应该调用此javascript函数

答案较晚，但希望我可以帮助某人。在IE9中进行调试时，我遇到了同样的问题。解决方案是删除HTML代码中的所有空格。代替

<tr> <td>...</td> <td>...</td> </tr>

我必须做

<tr><td>...</td><td>...</td></tr>

这似乎解决了问题！

这是IE9中非常严重的错误。在我的情况下，仅删除不同td之间的空白是不够的，因此我也删除了不同tr之间的空格。而且工作正常。

呈现动态表格时，ie-9也有类似的问题。

var table = $('<table><tr><td style="width :100"></td></tr></table>');

渲染时转换为...

<table><tbody><tr><td style="width :100px"></td></tr></tbody></table>

这在ie = 10 chrome safari中工作得很好...

 //   but for ie-8 it renders to... with a style attr in my case

 <table><tbody><tr><td ></td></tr></tbody></table>

您需要写100px而不是100。

在ie9中有相同的格式问题，在ie11中有一个新问题，它可以正确格式化，但是需要25-40秒来呈现大约400行和9列的表。它具有相同的原因，tr或td标签内的空格。

我正在显示一个表格，该表格是通过AJAX调用中的部分视图的渲染而创建的。我决定通过在此处发布的方法从呈现的部分视图中删除空格来在服务器上对其进行BFH处理：http : //optimizeasp.net/remove-whitespace-from-html

这是他的解决方案复制到：

    private static readonly Regex RegexBetweenTags = new Regex(@">(?! )\s+",     RegexOptions.Compiled);
    private static readonly Regex RegexLineBreaks = new Regex(@"([\n\s])+?(?<= {2,})<", RegexOptions.Compiled);
    private static string RemoveWhitespaceFromHtml(string html)
    {

        html = RegexBetweenTags.Replace(html, ">");
        html = RegexLineBreaks.Replace(html, "<");
        return html.Trim();

    }

这是一种方法，它以字符串形式返回部分视图，该视图是从另一个SO答案中窃取的：

public string RenderPartialViewToString(string viewName, object model)
    {
        this.ViewData.Model = model;
        try
        {
            using (StringWriter sw = new StringWriter())
            {
                ViewEngineResult viewResult = ViewEngines.Engines.FindPartialView(this.ControllerContext, viewName);
                ViewContext viewContext = new ViewContext(this.ControllerContext, viewResult.View, this.ViewData, this.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                return RemoveWhitespaceFromHtml(sw.ToString());
            }
        }
        catch (Exception ex)
        {
            //logger here
        }
    }

渲染大约400行的表需要一点时间，但是不到一秒钟，对于我来说这已经足够了。

有时候我在淘汰赛生成的表上遇到这个问题。就我而言，我使用此处找到的jQuery解决方案对其进行了修复

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            this.textContent = $.trim(this.textContent);
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

我在IE10中遇到KendoUI网格的相同问题。我能够通过这种黑客迫使IE重新呈现丢失的表格单元：

htmlTableElement.appendChild(document.createTextNode(''));

附加一个空的textNode使IE重新呈现整个表。