在任何doctype中,在Internet Explorer中的表中hover行都很慢

好吧,这个让我发疯。

我有一个约100行的html表。 当你将鼠标移到它上面时,我想让行改变颜色。

我试过了 :

  • :将鼠标hover在CSS中

  • javascript中的onmouseover / onmouseout事件

  • jquery .hover

  • jquery .mouseover / .mouseout

  • 使用e.target等将鼠标hover在桌面上

所有这些都在Firefox中运行得非常快,在IE7 / IE8中运行速度非常慢。 不管我试过什么doctype。 但是,如果我完全删除页面的doctype(怪癖),那么它在IE中的速度也非常快!

不幸的是没有doctype对我来说是不可接受的,因为我使用其他(jquery ui)组件似乎喜欢doctype(否则这些在IE中变慢!)

有什么建议?

去测试 :

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

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

更新:我发现使用背景图像为hover行实际上在IE中比使用背景颜色更快!! 但这只能在使用时快速工作:hover。 jquery或javascript方法不能快速工作。 它仍然没有Firefox那么快,但我可以接受。

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

更新3:不知怎的,我现在已经使用IE8了。 对JqGrid使用的一些类进行Diabled,不知道是否会产生差异。 我正在使用:hover与背景图像。 问题是,当我强制页面使用IE7标准模式时,它明显更快。 但是当我在IE7中尝试相同的页面时,它再次非常慢……真的让我疯狂……

是的,我也遇到过这个问题,表格渲染速度一直是IE中的一个问题。 当你拖动鼠标时,你会注意到一个CPU挂钩(我的双手机上的IE使用率为50%)。

但是,您可以使用文本修饰:CSS下划线:hover而不会导致此表重新计算效果。

我理解Rob的评论说doctype是无关的(和圣洁的),但这是一厢情愿的想法。 使用非常简洁的表可以很容易地重现这个问题,除了单元属性或单独的行属性之外:hover CSS。 当然,测量DOCTYPE对此的影响是很困难的,因为当您关闭STRICT时,您将禁用IE的应用function:将鼠标hover在非链接元素上。 在具有纯CSS边框的文本上绘制下划线并且页面上没有javascript或CSS表达式等也会导致问题,但是文本修饰不会。 显然,IE会针对该CSS规则禁止表重新计算,以防您在表中有链接。 (换句话说,MS开发人员在第一次发布缺陷之前就已经知道了这个问题,之后它仍然存在2个主要版本。多么好:)。所以,这是一个更酷的测试:

 IE TD performance etc.
Test

请注意,在上面,如果删除“line-height”CSS规则,或者切换到DOCTYPE TRANSITIONAL,则不会发现问题。 另请注意,它在很大程度上取决于您的CPU需要多少个单元格。 还要注意它是行或列(或多个表!)中的单元格总数,这会导致CSS样式更改时表现不佳的IE表。

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

我将我的桌子转换为固定尺寸的div,再次让我选择MS让我选择抛弃我的设计或浪费项目时间。

虽然更改doctype可能会显示问题,但问题不是由doctype引起的。 我只能怀疑它是由javascript引起的,但是你需要先解决一些validation问题。 validation您的HTML以查找错误列表。