IE9 表具有在随机列处偏移的随机行答案

【问题标题】：IE9 table has random rows which are offset at random columnsIE9 表具有在随机列处偏移的随机行
【发布时间】：2011-11-08 04:22:59
【问题描述】：

我有一个类别页面，当用户单击一个类别时，该类别下的项目会通过 jQuery Ajax 调用加载到表格中，并粘贴到类别下方的元素中。不过，似乎发生的是，加载的表中的一两行将在随机列处具有其数据偏移量。我已经在 IE9、FF 3.6 和 Chrome 13 中对此进行了测试。这似乎只发生在 IE9 中。表格数据格式完美——我使用 Fiddler 拦截请求，然后查看原始 html，没有任何问题。

该网站是在 ASP.NET MVC3 中构建的。通过 Ajax 请求返回的表返回一个 Razor 部分视图。不幸的是，这必须在 IE 中工作。我真的希望有人对此作出解释。

这是一个例子：还有一个：

编辑 [2012/03/25]：此应用程序已离开我的手，因此我无法验证哪些答案有效。 Adam Youngers 发布到http://social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/e6f49d52-ec3f-47c5-802e-b80d1a58ed39 的链接似乎有一些可能的解决方案。根据过去的经验，我会先尝试这些选项..

将添加到页面的头部元素。
尝试删除表格单元格之间的任何空白。例如。 “”，而不是让下一个单元格从新行开始。（这在过去给我造成了奇怪的间距问题）
【问题讨论】：
- 你应该发布表格的结果html，如果太长，只发布有问题的行的结果代码。
- 我有同样的问题，想补充一点，每次我重新加载同一个页面时，它都会发生在不同的行和列中。 html没有错。
- 我也有同样的问题。我已经浏览过表格的 HTML 并且没有任何问题。我的表格还包含表单元素。我不确定这在技术上是否在语义上是正确的。
- 我发现这个线程包含来自微软的初步回复，表示他们会调查它。目前还没有关于修复的官方回应。 social.msdn.microsoft.com/Forums/pl/iewebdevelopment/thread/…
- 在connect.microsoft.com/IE/feedback/details/665694/… 上应该有一个关于这个问题的 Connect 票，但它似乎已经消失了......

标签： jquery html-table internet-explorer-9

【解决方案1】：

问题似乎与空白间距有关。

我在http://social.msdn.microsoft.com/Forums/en-AU/iewebdevelopment/thread/28d78780-c95c-4c35-9695-237ebb912d90找到了这个答案

使用这样的正则表达式替换您从 AJAX 调用中获得的 html。

var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
tableHtml = tableHtml.replace(expr, '><');

【讨论】：

如果其他人不清楚如何获取和更新上面的 tableHtml 变量，下面是对我有用的代码： var expr = new RegExp('>[ \t\r\n \v\f]*
这里有一些进一步的讨论：social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/…
上述解决方案最初有效，但确实涵盖了我的所有案例。我一直随机获得空间。我发布的解决方案解决了我的问题。

【解决方案2】：

我使用了另一个帖子 Remove whitespace and line breaks between HTML elements using jQuery 的答案，其中有一个比上面的更有效的脚本。我使用answer 解决了它，但我会重复它以获得完整的答案。

jQuery.fn.htmlClean = function() {
    this.contents().filter(function() {
        if (this.nodeType != 3) {
            $(this).htmlClean();
            return false;
        }
        else {
            return !/\S/.test(this.nodeValue);
        }
    }).remove();
    return this;
}

最终，这只是一个临时解决方案，应该由微软在 IE9/10 中修复。

【讨论】：

我不确定您是否进行了一些性能测试，但这种解决方案对于大型表来说太过分了。
我同意它对一个非常大的表的性能影响很大。这是解决问题的方法。一个更好的解决方案是让 MS 来解决这个问题。

【解决方案3】：

@Johann Strydom 给出的解决方案有效，但如果您不想触及每个元素而只关注表格内容模型。

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

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 元素。

【讨论】：

【解决方案4】：

按照 Krummelz 的建议，添加 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 即可解决问题。

对于我的具体问题，我有一个 jquery datepicker 和常规标签，可以在 IE9 中正确呈现，但在 jquery ajax 调用之后会转移到数据中。放置上面的标签为我修复了它。值得一试。祝你好运。

【讨论】：

【解决方案5】：

空白也是我的问题，尽管我的情况有点不同。这个帖子帮我解决了这个问题（谢谢大家）。

我的表会很好，然后在回发后随机添加一列。这是我之前和之后的代码：

之前：（我有大约 10 个其他格式相同的问题不会导致这个问题，但这个是）

<tr>
    <th class="width125px th-left-borders">
        Intangibles
    </th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox>
    </td>
</tr>

之后：（删除了通常很好的换行符，但由于某种原因这导致了问题）

<tr>
    <th class="width125px th-left-borders">Intangibles</th>
    <td><asp:TextBox ID="txtCustFinancial_Intangibles" runat="server" 
            CssClass="textToLabel widthFull textbox_number_align"></asp:TextBox></td>
</tr>

希望这也会对某人有所帮助。

【讨论】：