Question

我向solution发了another of my questions。但是，在最近的一些变化之后，它在Firefox 3.6中表现不错，但在谷歌浏览器中显示出相当糟糕的显示异常。在JavaScript代码改变其位置后，似乎没有刷新/重绘表头行。

当浮动表标题行位于表格中间某处时，尤其明显，然后您快速向上滚动：它会在表格中间留下标题行的副本，并且不会正确地重绘表格

The online demo is located here.

源代码位于Mercurial bitbucket repository, here。

如果有人能指出一个干净的解决方案，让我在谷歌浏览器中正确刷新显示器，我将不胜感激。

更新：我在Ubuntu Linux 10.04和Windows XP上看到它，Chrome版本为5.0.375.99 beta。它似乎在Linux上更引人注目，但在Windows上也是一个问题。我刚刚在Linux上获得5.0.375.125测试版，但它仍在发生。

我将使用issue in BitBucket跟踪此内容。

更新 2011年1月26日：我在Ubuntu Linux 10.04上使用Chrome 9.0.597.67测试版对此进行了测试，问题似乎不再明显。

Answer 1

NEWER ANSWER：

我能够通过将重置延迟一个“执行帧”来解决Windows上的问题。在setTimeout中包装else条件：

                setTimeout(function() {
                    floatingHeaderRow.css("visibility", "hidden");
                    floatingHeaderRow.css("top", "0");
                }, 1);

老人的回答：

我不认为问题出现在Chrome for Windows（我刚试过）上。但是，切换到position：fixed而不是position：absolute可能会更好地执行并解决您的问题。只需使用你的间隔来检查你是否需要滚动并设置位置：固定，否则后退。

Answer 2

解决方案非常简单，Chrome在您的表格标题中有2个问题。

<thead>
<tr class="tableFloatingHeader" style="position: absolute; left: 0px; visibility: hidden; top: 0px; ">
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr><tr class="tableFloatingHeaderOriginal">
    <th>table1 col header</th>
    <th>table1 col header</th>
</tr>
</thead>

删除一个，您的问题将得到解决

在Google Chrome中，jQuery操作后表无法正常刷新

2 个答案: