使用任何 doctype 在 Internet Explorer 中悬停表中的行都很慢

2022-01-22 00:00:00 internet-explorer hover jquery javascript doctype

好吧，这个快把我逼疯了.

Ok, this one is driving me crazy.

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

I have a html table with about 100 rows. I want the rows to change color when you move the mouse above it.

我试过了:

  • :悬停在 CSS 中，

  • :hover in CSS,

javascript 中的 onmouseover/onmouseout 事件

onmouseover/onmouseout events in javascript

jquery .hover

jquery .hover

jquery .mouseover/.mouseout

jquery .mouseover/.mouseout

用 e.target 等鼠标悬停在桌子上

mouseover on the table with e.target etc

在 Firefox 中运行速度非常快，而在 IE7/IE8 中运行速度非常慢.无论我尝试什么文档类型.但是，如果我完全删除页面的文档类型(怪癖)，那么它在 IE 中也非常快！

All work perfectly fast in Firefox, and terribly slow in IE7/IE8. No matter what doctype I tried. But if I remove the doctype of the page entirely (quirks) then it's very fast in IE as well !

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

Unfortunately having no doctype is not acceptable for me, since I use other (jquery ui) components that seem to like a doctype (otherwise these get slow in IE!)

有什么建议吗?

测试:

怪癖模式(在 IE 中快速悬停):http://www.watikwil.nl/test_quirks.html

quirks mode (fast hovering in IE) : http://www.watikwil.nl/test_quirks.html

严格模式(在 IE 中缓慢悬停):http://www.watikwil.nl/test_strict.html

strict mode (slow hovering in IE) : http://www.watikwil.nl/test_strict.html

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

*更新 2:仍然有问题.在 IE8 中它仍然太慢，尤其是在行上有多个类时(如 JqGrid 所做的那样)*

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

推荐答案

是的，我也遇到过这个问题，而且表格渲染速度在IE中一直是个问题.当您四处拖动鼠标时，您会注意到 CPU 挂钩(IE 在我的 dual 上使用了 50%).

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.

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

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

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

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.

请注意，在上面，如果您删除line-height"CSS 规则，或者切换到 DOCTYPE TRANSITIONAL，您不会看到问题.另请注意，这在很大程度上取决于您的 CPU 需要多少个单元.另请注意，当 CSS 样式更改时，导致 IE 表格呈现性能不佳的是行或列(或多个表格！)中的单元格总数.

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.

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

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.

我将我的表格转换为具有固定大小的 div，再次指责 MS 让我在折腾我的设计或浪费项目时间之间做出选择.

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.

相关文章