对于任何文档类型，在 Internet Explorer 中将行悬停在表中都很慢

发布于 2024-09-28 23:05:26 字数 1200 浏览 3 评论 0原文

好吧，这让我发疯。

我有一个大约 100 行的 html 表。我希望当您将鼠标移到行上方时，行会改变颜色。

我尝试过：

:hover 在 CSS 中，
onmouseover/onmouseout 事件在 javascript
jquery .hover
jquery .mouseover/.mouseout
鼠标悬停在带有 e.target 等的桌子上

所有工作都非常快在 Firefox 中，在 IE7/IE8 中非常慢。无论我尝试什么文档类型。但如果我完全删除页面的文档类型（怪癖），那么它在 IE 中也非常快！

不幸的是，没有 doctype 对我来说是不可接受的，因为我使用其他看起来像 doctype 的（jquery ui）组件（否则这些在 IE 中会变慢！）

有什么建议吗？

测试：

怪异模式（在 IE 中快速悬停）： http://www.watikwil.nl/test_quirks.html

严格模式（在 IE 中缓慢悬停）：http://www.watikwil.nl/test_strict。 html

更新：我发现在 IE 中为悬停行使用背景图像实际上比使用背景颜色更快！但这只有在使用 :hover 时才能快速运行。 jquery 或 javascript 方法运行速度不快。它仍然不如 Firefox 快，但我可以接受。

*更新 2：仍然有问题。在 IE8 中它仍然太慢，特别是当行上有多个类时（如 JqGrid 所做的那样）*

更新 3：不知何故，我现在已经可以在 IE8 上使用了。禁用了 JqGrid 使用的一些类，不知道这是否会产生影响。我正在使用 :hover 和背景图像。问题是，当我强制页面使用 IE7 标准模式时，速度明显更快。但是当我在 IE7 中尝试相同的页面时，它又变得非常慢......真的让我发疯......

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦屿孤独相伴 2024-10-05 23:05:26

是的，我也遇到过这个问题，表格渲染速度一直是IE中的一个问题。当您拖动鼠标时，您会注意到 CPU 挂钩（在我的双机上，IE 使用了 50%）。

但是，您可以在 CSS:hover 上使用 text-decoration: underline ，而不会导致此表重新计算效果。

我理解罗布的评论，即文档类型是无关的（而且是神圣的），但这是一厢情愿的想法。使用非常简洁的表格可以轻松重现该问题，除了 :hover CSS 之外，没有单元格属性或单独的行属性。当然，衡量 DOCTYPE 对此的影响是很困难的，因为当您关闭 STRICT 时，您就禁用了 IE 将 :hover 应用于非链接元素的能力。在页面上使用纯 CSS 边框且没有 javascript 或 CSS 表达式等的文本上绘制下划线也会导致问题，但是文本装饰不会。显然，如果表中有链接，IE 会专门针对该 CSS 规则抑制表重新计算。（换句话说，MS 开发人员在第一次发布缺陷之前就知道了这个问题，并且后来它仍然存在于 2 个主要版本中。多好:)。）所以，这是一个更酷的测试：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css">
    a:hover { text-decoration: line-through; }
    a:hover { line-height: 1.1em; }
</style></head><body><table><tbody>
    <tr>
        <td><a href='#'>Test</a></td>
etc.

请注意，上面，你不'如果删除“line-height”CSS 规则，或者切换到 DOCTYPE TRANSITIONAL，则不会出现此问题。另请注意，这在很大程度上取决于您的 CPU 需要多少个单元。另请注意，当 CSS 样式更改时，单元格总数（无论是行还是列（或多个表！））会导致 IE 表格渲染性能不佳。

我有一种预感（没有尝试过，但如果你这样做的话，我会喜欢你的代码:>）如果不是改变表格行本身的颜色，而是在它前面放置一个透明的 png 这不会导致 IE 重新计算表格尺寸，您将获得所需的性能。它甚至可以放置在您可能已经用来滚动表格的 div 中，这不用感谢表格的其他 IE 问题。我猜你可以用这种方法获得合适的悬停效果（不完全是你在图形上的想法，但在视觉上可行）。

我将表格转换为固定大小的 div，咒骂 MS 再次让我在放弃设计或浪费项目时间之间做出选择。

Yes, I too experience this problem, and table rendering speed has been a problem in IE forever. You'll notice a CPU peg (50% usage by IE on my dual) as you drag the mouse around.

You can, however, use text-decoration: underline on CSS:hover without causing this table recalculation effect.

I understand Rob's comment that the doctype is unrelated (and holy), but it is wishful thinking. The problem is easily reproducable with a very spartan table, with no cell attributes or individual row attributes besides :hover CSS. Of course, measuring the effect of DOCTYPE on this is difficult, since when you turn off STRICT you disable IE's ability to apply :hover to non-link elements. Drawing underlines on text with a plain CSS border and no javascript or CSS expressions etc. on the page also causes the problem, however, text-decoration does not. Apparently IE suppresses table recalculation specifically for that CSS rule, in-case you have links in your table. (In other words, MS developers knew about the problem before releasing the defect the first time, and it's still in there 2 major versions later. How nice :).) So, here's a cooler test:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>IE TD performance</title><style type="text/css">
    a:hover { text-decoration: line-through; }
    a:hover { line-height: 1.1em; }
</style></head><body><table><tbody>
    <tr>
        <td><a href='#'>Test</a></td>
etc.

Note that, above, you don't see the problem if you remove the 'line-height' CSS rule, or if you switch to DOCTYPE TRANSITIONAL. Also note it depends heavily on your CPU how many cells you need. Also note it is the total number of cells, either in rows or columns (OR multiple tables!), that cause this poor performance rendering IE tables when CSS styles change.

I have a hunch (have not tried it, but would love your code if you do :>) that if instead of changing the color on the table row itself, you drop a transparent png in front of it that doesn't cause IE to recalculate the table dimensions, you'll get the performance you are looking for. It could even be placed in the div you are probably already using to scroll your table, no thanks to other IE issues with tables. I'm guessing you can get a suitable hover effect (not exactly what you had in mind graphically, but workable visually) with this method.

I converted my table to divs with fixed sizes, cussing out MS for once again making me choose between tossing my design or wasting project hours.

回复收藏 0 原文