发表新帖
发表新帖

Hovering rows in a table in Internet Explorer is slow with any doctype

前端 未结
关注
2 2116
一向
一向 2021-02-14 13:34

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 :

相关标签:
2条回答
  • 深忆病人
    2021-02-14 14:00

    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 讨论(0)
  • 难免孤独
    2021-02-14 14:05

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题