数据表 - 仅在IE9中滚动问题

Question

我有一个问题，Datatables没有正确使用它的x轴滚动。

我以前遇到过IE9'鬼细胞'问题，我能解决这个问题。但是，现在我遇到了我的overflow-x显示的问题，而不是隐藏它并使窗口可滚动。

我的数据表初始化：

 var oTable = $('#tableBP').dataTable({
        "bJQueryUI": true,
        "sScrollX": "100%",
        "sScrollXInner": "200%",
        "sScrollY": 300,
        "bScrollCollapse": false,
        "bFilter": true,
        "bSort": false,
        "bInfo": false,
        "bPaginate": false
    });

    //This is a Datatables plugin. The issue occurs whether I comment this part or not.
    new FixedColumns(oTable, { 
        "iLeftWidth": 225
    });

这就是我所面对的：

虽然它在IE9兼容模式下工作。不幸的是，页面的其他部分不允许我运行这是一个较低的版本兼容性，但这显然标志着它只是一个IE9问题。 Chrome，Safari，Opera，Firefox都没有问题。

由于其庞大的尺寸（在某些情况下为2000+ td字段），我不打算在此发布表格。它是一个完全有效的HTML表格，带有thead / tbody，并且标签之间的所有空格都被删除了（这就是修复我以前的鬼格问题）。

任何人都有使用数据表的经验并知道此问题的根本原因吗？

PS：这是一个MVC2应用程序（C＃.Net），但这个问题似乎与生成此网页的应用程序无关。

更新

我忘了提及以下部分：

表格过去正常显示;但是由于IE9在大表中的ghost单元格问题，我被迫清除了table / thead / tbody / tr / td标签之间的所有空格。 我通过在我的aplication的HTML输出上强制使用正则表达式替换来解决这个问题：

// response is the string with my HTML output which will be written to the browser after this:

string expression = @">[ \t\r\n\v\f]*<td"; 
response = Regex.Replace(response, expression, @"> <td");

如果我注释掉RegEx替换，数据表的溢出效果很好，但是我遇到了鬼细胞问题导致错位和全面丑陋。 取消注释后，所有单元格都完全对齐，但溢出停止工作。

就像我说的那样，这个问题只适用于IE9。所有其他浏览器（包括兼容模式下的IE9）都会在注释/未注释状态下完美呈现表。

Answer 1

在demo_table_jui.css第117行（.dataTables_wrapper下方）添加此内容：

.DTFC_ScrollWrapper {
    overflow: hidden;
    overflow-x: scroll;
}

这就是诀窍（至少在这里它可以，在所有浏览器中，包括IE9中的IE7和IE8文档模式）。

已编辑：我不应将溢出代码添加到.dataTables_wrapper中，正如我在本回答中提到的那样，但应该使用溢出来指定类.DTFC ScrollWrapper，参见上文代码。

---

顺便说一句，完全无关紧要：这家公司总是让我想起'De Bende van Nijvel'，不要问我原因;）

Answer 2

以下line 110 .dataTables_wrapper overflow:auto;之后的clear:both; .dataTables_wrapper { position: relative; min-height: 302px; _height: 302px; clear: both; overflow:auto; } {/ 1}}

overflow:auto;

<强>之前

Before http://iforce.co.nz/i/mjpmxycy.phe.png

<强>后

After http://iforce.co.nz/i/nqhwq2t4.ihg.png

可能想在3个表格周围加一个额外的div，如果你想坐在你的搜索工具栏下面，可以给clear:both;，{{1}}。

Answer 3

/*
 * The position is changed from relative to inherit, to fix the issue with the scrolling of the wrapper.
 */

.dataTables_wrapper {
    position: inherit;
    clear: both;
    *zoom: 1;
}

问题可能是因为DIV的位置。我通过覆盖数据表css中的位置修复了类似的问题。

Answer 4

我通过应用以下CSS来解决这个问题：

/* this is needed for IE and Firefox if using horizontal scroll*/
table{
    max-width: none;
    min-height: 0%;
}