Наведение строк в таблице в Internet Explorer происходит медленно с любым типом доктрины

Хорошо, этот меня сводит с ума.Наведение строк в таблице в Internet Explorer происходит медленно с любым типом доктрины

У меня есть таблица html со 100 рядами. Я хочу, чтобы строки меняли цвет при перемещении мыши над ним.

Я пробовал:

: парить в CSS,
OnMouseOver/onmouseout событий в JavaScript
JQuery .hover
JQuery .mouseover/.mouseout
Mouseover на столе с e.target и т.д.

Все работы совершенно быстро в Firefox, и очень медленно в IE7/IE8. Независимо от того, какой доктриной я пытался. Но если я удаляю doctype страницы целиком (quirks), то это очень быстро и в IE!

К сожалению, не имеющий доктайпа не приемлем для меня, так как я использую другую (JQuery UI) компоненту, которые, кажется, нравятся доктайп (в противном случае они получают медленно IE!)

Есть предложения?

для теста:

режим

причуды (быстрый парящий в IE): http://www.watikwil.nl/test_quirks.html

строгий режим (медленно парящего в IE): http://www.watikwil.nl/test_strict.html

UPDATE: Я обнаружил, что использование фона -изображение для зависающей строки на самом деле FASTER в IE, чем использование фонового цвета! Но это работает только при использовании: hover. Методы jquery или javascript работают не быстро. Это все еще не так быстро, как Firefox, но приемлемо для меня.

* ОБНОВЛЕНИЕ 2: Все еще есть проблемы. В IE8 это все еще слишком медленно, особенно при наличии нескольких классов по строкам (как JqGrid) *

UPDATE 3: Как-то у меня сейчас работает с IE8. Возможно, некоторые классы, используемые JqGrid, больше не знают, если это имеет значение. Я использую: наведите указатель на фоновое изображение. Дело в том, что когда я заставляю страницу использовать режим стандартов IE7, это заметно быстрее. Но когда я пытаюсь использовать ту же страницу в IE7, она снова очень медленная ... действительно заставляет меня безумно ...

источник

2010-10-21 Dylan

Что произойдет, если вы установите фиксированный стол-макет? Я не могу сказать, что я наблюдал эту проблему (с таблицами или нет). У вас есть несколько тестовых ссылок? – 2010-10-21 18:51:40

Настройка таблицы-макета для исправления не помогает ... это намного быстрее в режиме quirks! Я попытался настроить таблицу с использованием DIV, и это кажется намного быстрее, чем использование

, но приложение, над которым я работаю, использует JqGrid, который использует

– Dylan

. Я добавил некоторые тестовые ссылки сейчас, в IE зависание происходит гораздо медленнее с использованием doctype (строгое) – Dylan

ответ

При изменении типа doctype может возникнуть проблема, проблема не вызвана doctype. Я могу только подозревать, что это вызвано javascript, но у вас есть некоторые вопросы валидации, с которыми вам нужно обратиться в первую очередь. Подтвердите свой HTML-код для этого списка ошибок.

источник

2010-10-23 14:04:37 Rob

Теперь я изменил строгий пример на html5, и теперь он корректно проверяется. Не имеет никакого значения ... Если я изменил режим рендеринга на IE7 (в Internet Explorer 8), зависание будет молниеносно. – Dylan

Прекратите возиться с доктриной! Это первое, что происходит на странице и НИКОГДА не меняется. Он не должен иметь никакого влияния на то, как браузер обрабатывает это, но мы говорим об IE здесь, и вы никогда не сможете доверять IE, чтобы сделать что-то правильно. – Rob

Изменил его на xhtml строго, удалил javascript и изменил зависание на css: hover. В IE8 все еще очень медленно. – Dylan

Да, я тоже испытываю эту проблему, и скорость рендеринга стола была проблемой в IE навсегда.Вы заметите привязку процессора (50% использования IE на моем двойном), когда вы перетаскиваете мышь.

Вы можете, однако, использовать текстовое оформление: подчеркнуть на CSS: наведите указатель мыши, не вызывая эффект пересчета этой таблицы.

Я понимаю комментарий Роба, что doctype не связан (и свят), но это принятие желаемого за действительное. Проблема легко воспроизводится с очень спартанской таблицей, без атрибутов ячеек или отдельных атрибутов строки, кроме: hover CSS. Конечно, измерение влияния DOCTYPE на это сложно, поскольку, когда вы отключите STRICT, вы отключите способность IE применять: наведите указатель на элементы без ссылки. Подчеркивание подчеркивания текста с простой границей CSS и без javascript или CSS-выражений и т. Д. На странице также вызывает проблему, тем не менее, для оформления текста нет. Очевидно, IE подавляет перерасчет таблицы специально для этого правила CSS, в случае, если у вас есть ссылки в вашей таблице. (Другими словами, разработчики MS знали о проблеме, прежде чем отпустить дефект в первый раз, и он все еще там 2-х основных версиях позже Как хорошо :).). Итак, вот кулер тест:

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

Примечание что, выше, вы не видите проблему, если вы удаляете правило CSS линии «высота-высота», или если вы переключаетесь на DOCTYPE TRANSITIONAL. Также обратите внимание, что это зависит от вашего процессора, сколько ячеек вам нужно. Также обратите внимание, что это общее количество ячеек, будь то в строках или столбцах (ИЛИ несколько таблиц!), Которые вызывают эту слабую рентабельность рендеринга таблиц IE при изменении стилей CSS.

У меня есть догадка (не пробовал, но хотел бы код, если вы:>), что если вместо изменения цвета на самой строке таблицы, вы уронили прозрачный PNG перед ним, что не приводит к тому, что IE пересчитывает размеры таблицы, вы получите требуемую производительность. Его можно даже поместить в div, который вы, вероятно, уже используете, чтобы прокручивать таблицу, а не благодаря другим проблемам IE с таблицами. Я предполагаю, что вы можете получить подходящий эффект зависания (не совсем то, что вы имели в виду графически, но визуально визуально) с помощью этого метода.

Я преобразовал свой стол в divs с фиксированными размерами, ругая MS за то, что заставляет меня выбирать между броском моего дизайна или тратой времени на проект.

источник

2010-11-04 13:04:23 Shannon

P.S. В случае, если мой промах не был ясен, поскольку вы уже используете jquery, почему бы не попробовать его использовать, чтобы получить положение верхних левых и нижних правых углов TR, и поместите абсолютно позиционированный div с прозрачным png За столом? – Shannon

обратите внимание, что другой человек сообщает, что если вы применяете некоторые атрибуты стиля (например, фон) непосредственно к элементу, а не изменяете класс элемента на один с желаемыми атрибутами, IE будет выполнять меньшую переработку работы. – Shannon

Смежные вопросы