Question

我的网站一直运行顺畅，包括IE8，IE7，FF，Chrome和Safari。现在我在IE9上测试它，我遇到了一个奇怪的问题：在某些页面中，某些表格数据呈现错误。

HTML源代码是正确的，并且每次刷新页面时问题的行都会改变（说实话，问题本身只出现在一些刷新中，而不是全部）。

使用IE的F12工具，表结构显示正确，TD包含M08000007448后应该没有空TD，但它仍然是这样渲染的。

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

我在应用程序的其他表中也有这个表呈现问题，有没有遇到类似这样的事情？它只发生在IE9中:(

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

我试图保存页面（带图像）并在IE9本地打开它，但问题永远不会发生。（当然我检查了所有的表结构，没关系。标题和所有行都有相同数量的TD，必要时有正确数量的colspan。）

Answer 1

enter image description here 我也有同样的问题。您可能需要阅读此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);

Answer 2

我在使用jquery模板填充表时遇到了同样的问题。我只在IE9中对较大的数据集（300+）保持'ghost'<td>。这些<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>

Answer 3

@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插件获得。请尝试使用功能检测。

Answer 4

我通过删除空格修复了这个问题：

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);

Answer 5

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

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

Answer 6

我也遇到了这个问题。

我发现， td / th 标签中的宽度属性会导致此问题。

将其更改为 style =“width：XXpx”，问题解决了：）

Answer 7

我也遇到了这个问题，我意识到当我直接在<td>元素中添加文本时就发生了这种情况。我不确定它是否是标准，但在<span>元素中包装任何文本后，渲染问题就消失了。

所以而不是：

<td>gibberish</td>

尝试：

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

Answer 8

找到一个非常有用的脚本，以便在渲染时阻止html表中的不需要的单元格。

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

这个javascript函数应该在页面加载时调用（即onload事件）

Answer 9

迟到的答案，但希望我可以帮助这个人。在IE9中调试时我遇到了同样的问题。解决方案是删除HTML代码中的所有空格。而不是

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

我不得不做

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

这似乎解决了这个问题！

Answer 10

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

Answer 11

渲染动态表时，我遇到了与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。

Answer 12

与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行的表，这对我来说已经足够了。

Answer 13

我有时会在Knockout生成的表上遇到此问题。就我而言，我使用jQuery solution found here

修复了它

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;
}

Answer 14

我在IE10中遇到了与KendoUI网格相同的问题。我能够强迫IE用这个hack重新渲染丢失的表格单元格：

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

追加空textNode使IE重新呈现整个表。

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

14 个答案: