Internet Explorer 9不能正确地呈现表格单元格

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

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

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

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

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

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

我试图保存页面(使用图像)并使用 IE9在本地打开它，但问题从未出现。(当然，我检查了所有的表结构，没有问题。标题和所有行都有相同数量的 TD，必要时有正确的共跨数)。

42257 次浏览
小开

IE 博客提到了一个新的工具，今天称为 Compat 检查器脚本，以帮助故障排除 IE9呈现不兼容性。它可能有助于解决你的问题。

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

小开

我也有这个问题。

我突然想到，第三次标签中的 宽度属性引起了这个问题。

把它改成 Style = “ width: XXpx”，问题就解决了:)

小开

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.

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

例如:

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

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

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>gibberish</td>

try:

<td><span>gibberish</span></td>
小开

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

这是 IE9中非常严重的 bug。在我的例子中，仅仅删除不同 td 之间的空格是不够的，所以我也删除了不同 tr 之间的空格。而且效果很好。

小开

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.

下面是我的工作领导设计的一个更好的正则表达式。

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

覆盖所有表、标题、 colgroup、 coll、 tbody、 thead、 tfoot、 tr、 td、 th 元素。

注意: jQuery 1.9中删除了 jQuery.浏览器，只能通过 jQuery.shift 插件使用。请尽量使用特征提取。

小开

我在渲染动态表时也遇到了类似的 ie-9问题。

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

翻译过来就是..。

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

这工程完全罚款在即 = 10铬狩猎..。

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


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

你需要写 100px而不是 100。

小开

我在 IE10中的 KendoUI 网格也有同样的问题。我可以通过这个黑客技术强制 IE 重新渲染丢失的表单元格:

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

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

小开

Having same formatting issue with ie9, and a new issue in ie11 where it formats correctly but takes 25-40 seconds to render a table of about 400 rows and 9 columns. It has the same cause, whitespace inside the tr or td tags.

我正在显示一个表，它是通过从 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
}
}

It takes a bit of time, but less than a second to render a table of about 400 rows, which for my purposes is good enough.

小开

回答晚了，但希望我能帮上忙。 我在 IE9调试的时候也遇到过同样的问题，解决方案就是删除 HTML 代码中的所有空格。 而不是

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

我必须这么做

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

这似乎解决了问题！

小开

我有时在 Knokout 生成的表上遇到这个问题，在我的例子中，我使用 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;
}
小开

发现一个非常 有用的剧本，以防止 多余的细胞在 HTML 表中呈现。

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

当页面加载时应该调用这个 javascript 函数(即 onload 事件)


提交答案