Hovering rows in a table in Internet Explorer is slow with any doctype
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.
While changing the doctype may display the issue, the issue is not caused by the doctype. I can only suspect it's caused by javascript but you have some validation issues you need to address first. Validate your HTML for that list of errors.
加载中,请稍侯......
精彩评论