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

Internet Explorer 9 not rendering table cells properly

提问by fgpx78

My website has always run smoothly with IE8, IE7, FF, Chrome and Safari. Now I'm testing it on IE9 and I'm experiencing a strange problem: in some pages, some tabular data renders incorrectly.

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

The HTML source is correct and all, and the row giving the problem changes every time I refresh the page (to tell the truth, the problem itself appears only in some refresh, not all).

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

Using the F12 Tool of IE, the table structure appears correct, there should be no empty TD after the TD containing M08000007448, but still it renders like this.

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

Moreover, if I use the F12 tool, with "select element by click" tool in the toolbar, and I try to click on the empty space between M08000007448 and 19 , it selects the TR, not a "hidden td".

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

I'm having this table rendering problem also in some other table in the application, anyone experiencing something like this? It happens only in IE9 :(

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

I don't know if it's important, but the page is made with ASPNET (webforms) and use Jquery and some other JS plugin.

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

I tried to save the page (with images) and open it in local with IE9, but the problem never occurs. (Of course I checked all the table structure and it's ok. Header and all rows have the eact same number of TD's, with the right number of colspan when necessary).

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

回答by Shanison

I have exactly the same problem as well. you may want to read this https://connect.microsoft.com/IE/feedback/details/649949/innerhtml-formatting-issues-on-very-large-tables

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

YOu can remove the space inbetween td by using javascript if your html is returned from ajax, then from the response, you replace it with

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

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

回答by Jorge

I had the same exact issue populating a table using jquery templates. I kept having 'ghost' <td>'s on larger datasets (300+) only in IE9. These <td>'s would push the outer columns outside the boundries of my table.

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

I fixed this by doing something really silly; removing all the spaces betwen the <td>start and end tags and left justifying the HTML markup pertaining to my table. Basically, you want all of your <td></td>on the same line, no spaces.

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

Example:

例子：

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

回答by Ravi Kadaboina

The solution given @Shanison helps only partially but the problem persists if there are spaces between any of the other elements that can be part of the table content model like thead, th etc.

给出的解决方案@Shanison 只提供了部分帮助，但如果任何其他元素之间存在空格，这些元素可以成为表格内容模型的一部分，如 thead、th 等。

Here is a better regex devised by my Lead at work.

这是我的领导在工作中设计的一个更好的正则表达式。

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

covering all table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th elements.

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

Note: jQuery.browser was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.

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

回答by Will Liska

I fixed this issue by removing the whitespace:

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

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

回答by user1207607

I ran into this problem as well and I realized that it happened when I was directly putting text in <td>elements. I'm not certain whether it's a standard or not but after wrapping any text in <span>elements, the rendering issues disappeared.

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

So instead of:

所以而不是：

<td>gibberish</td>

try:

尝试：

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

回答by Dan Sorensen

IE Blog mentions a new tool today called the Compat Inspector script to help troubleshoot IE 9 rendering incompatibility. It may help troubleshoot your issue.

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

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

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

回答by TAURI

I was having that problem too.

我也遇到了这个问题。

It occured to me, that width attributein td/thtags causng this problem.

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

Changed it to style="width: XXpx"and problem is solved :)

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

回答by Rish

Found a very useful scriptto prevent unwanted cellsin your html table while rendering.

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

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

This javascript function you should call when the page loads (i.e. onload event)

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

回答by anneleenw

Late answer, but hopefully I can help someone with this. I experienced the same problem when debugging in IE9. The solution was removing all whitespaces in the HTML code. Instead of

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

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

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

I had to do

我必须做

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

This seemed to solve the problem!

这似乎解决了问题！

回答by Homer

I had this problem sometimes on tables generated by Knockout. In my case I fixed it using the jQuery solution found here

我有时在 Knockout 生成的表上遇到这个问题。就我而言，我使用此处找到的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;
}