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

Posted 2023-02-21

【中文标题】Internet Explorer 9 无法正确呈现表格单元格

【英文标题】：Internet Explorer 9 not rendering table cells properly

【发布时间】：2011-08-13 22:33:03

【问题描述】：

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

html 源代码正确无误，每次刷新页面时，出现问题的行都会发生变化（说实话，问题本身只出现在某些刷新中，而不是全部出现）。

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

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

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

我不知道这是否重要，但该页面是用 ASPNET (webforms) 制作的，并使用了 Jquery 和其他一些 JS 插件。

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

【问题讨论】：

任何代码？也许你在某处有一个不匹配的标签？

您能否使用 IE9 F12 工具验证 HTML？ IE9 会告诉你它是在什么模式下渲染的吗？ Quirks Mode、IE 7、IE 8、IE 9 标准（默认）等...

IE 博客今天提到了一个新工具来帮助解决 IE 9 不兼容问题：blogs.msdn.com/b/ie/archive/2011/04/27/…

代码真的很长，我觉得问题不存在。使用F12工具未发现错误，渲染模式为IE9。我尝试了 Compat 检查器并让您知道；）我还检查了标签不匹配（我做的第一件事）但没有运气

顺便说一句，我发现了问题：似乎 HEAD 标记之前的一些 javascript 代码导致了问题。 IE9 似乎不能很好地处理它，...这是一个问题，因为我这样做是为了解决 MVC 问题..我回到旧的 :) 谢谢大家。

【参考方案1】：

我也有同样的问题。您可能想阅读此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);

【讨论】：

这个解决方案解决了我的问题。在我找到这个解决方案之前，它给了我一个困惑。

链接已失效。

它仍然可用。您必须登录才能查看内容。我刚刚截了个图。你可以在我的回答中找到截图

我还加了  到空单元格。

如果你不是从 ajax 而是通过局部视图返回怎么办

【参考方案2】：

我在使用 jquery 模板填充表时遇到了同样的问题。我只在 IE9 中的较大数据集（300+）上一直有“幽灵”<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>

【讨论】：

谢谢，如果问题再次出现，我会尝试。很高兴知道我不是唯一拥有它的人；）

什么？ （这是我的第一反应）。但它奏效了！非常感谢！

为我工作非常感谢！为你 +1

你先生，你真棒！ :-)

非常感谢您！删除

开始和结束标记之间的所有空格实际上确实有效。

【参考方案3】：

@Shanison 给出的解决方案仅提供部分帮助，但如果可以作为表格内容模型一部分的任何其他元素之间存在空格，例如 thead、th 等，问题仍然存在。

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

if (jQuery.browser.msie && jQuery.browser.version === '9.0')

    data = data.replace(/>\s+(?=<\/?(t|c)[hardfob])/gm,'>');

涵盖所有 table、caption、colgroup、col、tbody、thead、tfoot、tr、td、th 元素。

注意：jQuery.browser 在 jQuery 1.9 中被删除，只能通过 jQuery.migrate 插件使用。请尝试改用特征检测。

【参考方案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);

【参考方案5】：

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

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

【讨论】：

无法使用该工具找到任何内容。只是由于 aspnet 引擎渲染导致了很多验证问题（标题中的某些元和链接标签缺少 end /）。

【参考方案6】：

我也遇到了这个问题。

我突然想到，td/th 标签中的width 属性 导致了这个问题。

改成 style="width: XXpx" 问题就解决了:)

【参考方案7】：

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

所以而不是：

<td>gibberish</td>

尝试：

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

【讨论】：

我喜欢这个解决方案。它比从所有元素之间去除空白更直接。此外，它对我有用:-)

【参考方案8】：

找到了一个非常有用的脚本，可以在呈现时防止 html 表格中出现不需要的单元格。

function removeWhiteSpaces()

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

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

【参考方案9】：

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

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

我不得不这样做

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

这似乎解决了问题！

【参考方案10】：

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

【参考方案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。

【参考方案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 行的表格需要一点时间，但不到一秒，这对我来说已经足够了。

【参考方案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;

【参考方案14】：

我在 IE10 中遇到了与 KendoUI 网格相同的问题。我能够通过这个 hack 强制 IE 重新呈现丢失的表格单元格：

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

添加一个空的 textNode 会使 IE 重新渲染整个表格。