将鼠标悬停在Internet Explorer中的表格中的行与任何文档类型都很慢 [英] Hovering rows in a table in Internet Explorer is slow with any doctype

问题描述

好的，这个让我疯狂。

我有一个大约有100行的html表。我想让行在上面移动鼠标时改变颜色。

我试过了：

• ：悬停在CSS中，
  

• javascript中的onmouseover / onmouseout事件




• jquery .hover




• jquery .mouseover / .mouseout

使用e.target等在桌面上进行鼠标悬停。




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





不幸的是，没有文档类型对我来说是不可接受的，因为我使用其他（jquery ui）组件似乎喜欢doctype（否则这些在IE中会变慢！）



有什么建议吗？



测试：
$ b 怪癖模式（快速悬停在IE中）： http://www.watikwil.nl/test_quirks.html





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





UPDATE：
我发现使用悬停行的背景图像实际上比使用背景色更快！
但是，只有在使用hover时，这才会工作得很快。 jquery或javascript方法不能快速运行。它仍然没有Firefox那么快，但我可以接受。 b b仍然有问题。在IE8中，它仍然太慢了，尤其是当有多行的行时（就像JqGrid所做的那样）* * b
$ b

更新3：
不知何故，我已经与IE8合作。使用JqGrid使用的某些类，不知道是否会产生差异。我正在使用：将鼠标悬停在背景图片上。
事情是，当我强制页面使用IE7标准模式时，它明显更快。但是，当我在IE7中尝试相同的页面时，它再次非常缓慢......真的让我疯狂...... 是的，我也经历过这个问题，并且表格渲染速度一直是IE中永远的问题。当你拖动鼠标时，你会注意到一个CPU挂钩（在我的双核上使用IE的50％）。





然而，你可以使用文本修饰：underline在CSS上：悬停而不会导致此表的重新计算效果。





我了解Rob的评论，即doctype是不相关的（和圣洁），但这是一厢情愿的想法。这个问题很容易用非常简单的表格来重现，除此之外没有单元格属性或单独的行属性：悬停CSS。当然，测量DOCTYPE对此的影响很困难，因为当你关闭STRICT时，你禁用了IE的应用能力：将鼠标悬停在非链接元素上。在页面上用纯CSS边框和没有javascript或CSS表达式的文字加下划线也会导致问题，但是，文本修饰不会。显然IE会专门针对该CSS规则来抑制表格重新计算，以防您的表格中存在链接。 （换句话说，MS开发人员在第一次发布缺陷之前就知道这个问题，而且它仍然在那里有两个主要版本。）:)所以，这是一个更酷的测试：

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 // ENhttp://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 ='＃'>测试< / a>< / td> 
等
  

请注意，如上所述，如果您移除'line-height'CSS规则，或者如果您切换到DOCTYPE TRANSITIONAL。还要注意它很大程度上取决于你的CPU需要多少个单元。另请注意，它是单元格的总数，无论是在行还是在列（或多个表格！）中，都会导致在CSS样式发生更改时呈现IE表格的效果差。





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

与固定大小，诅咒MS再次让我选择折腾我的设计或浪费项目时间。



Ok, this one is driving me crazy.

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

I tried :

• :hover in CSS,

• onmouseover/onmouseout events in javascript

• jquery .hover

• jquery .mouseover/.mouseout

• mouseover on the table with e.target etc

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 !

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!)

Any suggestions?

to test :

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

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

UPDATE: I found that using a background-image for the hovering row is actually FASTER in IE than using background-color !! But this only works fast when using :hover. The jquery or javascript methods don't work fast. It's still not as fast as Firefox, but acceptable to me.

*UPDATE 2: Still having problems. In IE8 it's still too slow, especially when having multiple classes on rows (as JqGrid does) *

UPDATE 3: Somehow I've got it working now with IE8. Diabled some classes JqGrid uses, don't know anymore if that made the difference. I'm using :hover with a background-image. The thing is, when I force the page to use IE7 Standards mode, it's noticably faster. But when I try the same page in IE7, it's VERY slow again... really driving me insane...

解决方案

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.

这篇关于将鼠标悬停在Internet Explorer中的表格中的行与任何文档类型都很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！