Недавно в процессе разработки наткнулся на интересный баг в jQuery. В библиотеке jQuery ver.1.3.2 реализована некорректная работа функции toggle() под IE8. В остальных браузерах работает нормально. Заключается ошибка в следующем: последовательно применяя toggle() к Поколупавшись в логике работы функции toogle(), выяснил, что она использует два селектора для определения состояния элемента страницы (видимый/невидимый). Приведу код ниже: Эту проблему можно исправить, проверяя атрибут display у искомого элемента. Тогда селекторы должны принять такой вид: Могу предложить и более сложное решение, которое проверяет, как и раньше, высоту и ширину элемента, но при этом берёт во внимание особенности работы с tr: элементу таблицы в браузере Internet Explorer 8 элемент будет успешно скрыт, но обратно не будет показан при повторном вызове. Sizzle.selectors.filters.hidden = function(elem){
return elem.offsetWidth === 0 || elem.offsetHeight === 0;
};
Sizzle.selectors.filters.visible = function(elem){
return elem.offsetWidth > 0 || elem.offsetHeight > 0;
};
Оба из них проверяют видимость элемента на странице путём проверки его высоты и ширины. Итак, в чём же кроется проблема данного определения, и почему не работает метод toggle() под IE8? Элемент, хоть и имеет аттрибут display:none, всё равно имеет ширину > 0. Высота скрытого tr равна 0. Логика :visible/:hidden селекторов считает элемент видимым, если элемент имеет какую-то высоту или ширину, что есть неправильно для «любимого» IE. Sizzle.selectors.filters.hidden = function(elem){
return (elem.style.display.toLowerCase() !== 'none');
};
Sizzle.selectors.filters.visible = function(elem){
return (elem.style.display.toLowerCase() === 'none');
};Sizzle.selectors.filters.hidden = function(elem){
var width = elem.offsetWidth, height = elem.offsetHeight,
force = /^tr$/i.test( elem.tagName );
return ( width === 0 && height === 0 && !force ) ?
true :
( width !== 0 && height !== 0 && !force ) ?
false :
!!( jQuery.curCSS(elem, "display") === "none" );
};
Sizzle.selectors.filters.visible = function(elem){
return !Sizzle.selectors.filters.hidden(elem);
};
Подборка публикаций по web-программированию, PHP, JavaScript, CSS, HTML, серверные вещи, браузеры, информационные технологии, и немного компьютерного юмора.
понедельник, 17 августа 2009 г.
jQuery toggle() IE8 bug
Подписаться на:
Комментарии к сообщению (Atom)
Спасибо!!!))
ОтветитьУдалитьПриятно слышать, что кому-то помог c jQuery toggle() bug-ом в IE8... потому, что сами разработчики jQuery не торопятся его чинить
ОтветитьУдалитькак решение проблемы использую toggleClass
ОтветитьУдалитьда, это тоже выход, можно конечно и ручками переключать и навешивать атрибуты при помощи простого обработчика, но хотелось бы использовать нативный инструмент
ОтветитьУдалить