Question

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

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

这是一个例子： Notice the offset on the second column 而另一个：

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

添加＆lt; meta http-equiv =“X-UA-Compatible”content =“IE = 8”/＆gt;到页面的head元素。
尝试删除表格单元格之间的任何空白区域。例如。 “＆lt; / td＆gt;＆lt; td＆gt;”，而不是让新行开始下一个单元格。（这在过去给我造成了奇怪的间距问题）

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

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

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

Answer 3

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

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

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

涵盖所有表格，标题，colgroup，col，tbody，thead，tfoot，tr，td，th元素。

Answer 4

根据Krummelz的建议，添加<meta http-equiv="X-UA-Compatible" content="IE=8" />会使问题消失。

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

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

希望这对某些人也有帮助。

IE9表具有在随机列上偏移的随机行

5 个答案: