Недавно в процессе разработки наткнулся на интересный баг в jQuery. В библиотеке jQuery ver.1.3.2 реализована некорректная работа функции toggle() под IE8. В остальных браузерах работает нормально. Заключается ошибка в следующем: последовательно применяя toggle() к элементу таблицы в браузере Internet Explorer 8 элемент будет успешно скрыт, но обратно не будет показан при повторном вызове.
Поколупавшись в логике работы функции toogle(), выяснил, что она использует два селектора для определения состояния элемента страницы (видимый/невидимый). Приведу код ниже:
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.
Эту проблему можно исправить, проверяя атрибут display у искомого элемента. Тогда селекторы должны принять такой вид:
Sizzle.selectors.filters.hidden = function(elem){
return (elem.style.display.toLowerCase() !== 'none');
};
Sizzle.selectors.filters.visible = function(elem){
return (elem.style.display.toLowerCase() === 'none');
};
Могу предложить и более сложное решение, которое проверяет, как и раньше, высоту и ширину элемента, но при этом берёт во внимание особенности работы с tr:
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);
};