IE9无法正确渲染表格单元格

Question

我的网站一直在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数量）。

- fgpx78

---

有任何代码吗？也许你在某个地方有不匹配的标签？ - Naftali

你能使用IE9 F12工具验证HTML吗？ IE9是否告诉您它正在呈现的模式？ Quirks Mode，IE 7，IE 8，IE 9 Standards（默认）等等... - Dan Sorensen

IE博客今天提到了一个新工具，可以帮助解决IE 9的兼容性问题：http://blogs.msdn.com/b/ie/archive/2011/04/27/ie9-compat-inspector.aspx - Dan Sorensen

代码真的很长，我不认为问题出在那里。使用F12工具没有发现错误，并且呈现模式是IE9。我会尝试兼容性检查器并让您知道；）我还检查了标签匹配（我做的第一件事），但没有运气。 - fgpx78

这个问题类似于：https://dev59.com/O17Va4cB1Zd3GeqPHjQ0 - Sandeep

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

- Shanison

---

它仍然可用。您必须登录才能查看内容。我刚刚拍了一些截图。您可以在我的答案中找到截图。 - Shanison

我还在空单元格中添加了  。 - Bakudan

如果您不是通过Ajax返回，而是通过部分视图返回呢？ - leora

@leora 如果不是ajax，你可以在文档准备好后再替换整个表格的HTML。 - Shanison

@shanison ，我在getjson中添加表格行时遇到了问题，有时会出现两行合并的情况。我尝试使用你的替换代码，但在 Firefox 中没有解决问题！你能帮我修复一下吗？var newRowContent = '<tr><td>'+count+')'+this.gsx$name.$t+'</td><td>'+this.gsx$category.$t+'</td></tr>\n'; $("#tblEntAttributes tbody").append(newRowContent); - user1788736

Answer 2

我曾经遇到过完全相同的问题，使用jquery模板填充表格时出现了问题。当数据集较大（300+）且仅在IE9中时，我一直看到“幽灵”<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>

- Jorge

---

谢谢，如果问题再次出现，我会尝试的。虽然很高兴知道不只有我遇到了这个问题 ;) - fgpx78

什么？（这是我的第一反应） 但它起作用了！非常感谢你！ - Filipa Lacerda

对我有用，非常感谢！给你点赞。 - Saurabh Bayani

您，先生，您真棒！ :-) - Satya

非常感谢您！事实证明，删除<td>开始和结束标记之间的所有空格确实有效。 - Frankie Loscavio

Answer 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 1.9 中已经移除了jQuery.browser，只能通过jQuery.migrate插件使用。请尽量使用特征检测(feature detection)代替。

- Ravi Kadaboina

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

- Will Liska

Answer 5

我也遇到了这个问题，后来发现是因为我直接将文本放在 <td> 元素中导致的。我不确定这是否是标准，但是在将任何文本包装在 <span> 元素中后，渲染问题就消失了。

所以，不要这样写：

而应该这样写：

<td>gibberish</td>

尝试：

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

- user1207607

---

我喜欢这个解决方案。它比从所有元素之间剥离空格更直接。此外，它对我起作用了 :-) - R. Schreurs

Answer 6

我找到了一段非常有用的脚本，可以在渲染HTML表格时防止不需要的单元格。

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

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

- Rish

Answer 7

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

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

- Dan Sorensen

---

工具中找不到任何东西。由于aspnet引擎渲染问题，只有大量的验证问题（头部缺少一些meta和link标签的结束/）。 - fgpx78

Answer 8

我也遇到了这个问题。

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

将其更改为style="width: XXpx"，问题就解决了 :)

- TAURI

Answer 9

晚回答了，但希望能帮助到有需要的人。 我在IE9调试时遇到了同样的问题。解决方法是删除HTML代码中的所有空格。 不要像这样：

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

而应该这样做：

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

这似乎解决了问题！

- anneleenw

Answer 10

在渲染动态表格时，我在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。

- Arun Pratap Singh