IE8 Стандарты режима JQuery illogic

Question

У меня проблема с JQuery (с использованием JQuery 1.4.2), которая проявляется только в IE8 в стандартном режиме, на одном конкретном элементе DOM, но не на других почти идентичных элементах dom. Лучший пример того, почему это не имеет смысла, приведен ниже:

$('span.error:visible')[0].style.display

Приведенный выше фрагмент кода возвращает «none», что, если у меня нет какой-либо аневризмы мозга, невозможно без ошибки в JQuery или IE8. Это происходит только в IE8 в стандартном режиме, а не в любом другом браузере или в режиме совместимости IE8. Диапазон, который он находит, на самом деле является проверочным элементом управления ASP.net, поэтому у меня есть только ограниченное количество, если контроль над тем, что он отображает в браузере. Когда я проверяю DOM с помощью панели инструментов разработчика IE8 и копирую HTML из DOM, он дает мне следующее:

<SPAN style="DISPLAY: none; COLOR: red" 
id=ctl00_cphContentBody_mnMainMiddleNames_ebvMiddleName1 class=error
controltovalidate="ctl00_cphContentBody_mnMainMiddleNames_txtMiddleName0"
errormessage="JQuery should not find this" display="Dynamic" validationGroup="MiddleNames"
isvalid="true" validationexpression="[A-Za-z][A-Za-z '\-]*[A-Za-z]*">JQuery should not
find this</SPAN>

Если я просто делаю вид источника, копирую и вставляю его, я получаю следующее:

<span id="ctl00_cphContentBody_mnMainMiddleNames_ebvMiddleName1" class="error"
style="color:Red;display:none;">JQuery should not find this</span>

Если я создаю простой файл HTML, содержащий только одну из приведенных выше частей HTML, то $('span.error:visible') не находит промежутки, и я не могу опубликовать код, чтобы иметь возможность воспроизвести эту проблему. Но на реальной странице asp.net, если я запускаю $('span.error:visible')[0].style.display, он возвращает «none», а если я запускаю $('span.error:visible').text(), он возвращает «JQuery не должен найди это ".

tl; dr Как $('span.error:visible')[0].style.display может вернуть "none".

Изменить, чтобы ответить на комментарий Никса.

$('span.error:visible')[0].offsetWidth возвращает 3 $('span.error:visible')[0].offsetHeight возвращает 22 * ​​1022 *

Что удивительно, я нашел ниже на сайте Jquery.

В jQuery 1.3.2 элемент виден если его смещение браузера сообщило offsetWidth или offsetHeight больше 0.

Элемент не виден, но согласно вышеприведенному JQuery считает, что это так.

Что означает это изменение? Это значит что если отображение CSS вашего элемента "none" или любой из его родителей / предков элемент отображает «нет», или если ширина элемента равна 0, а элемент высота равна 0, тогда элемент будет сообщается как скрытый.

Так что вышесказанное просто неправильно. Дисплей имеет значение «none», но offsetWidth и offsetHeight не равны нулю.

Answer 1

Похоже, что это ошибка браузера, хотя вопрос о том, должен ли jQuery справляться с этим, несомненно, является предметом споров. Селектор :visible равен на самом деле просто наоборот :hidden селектор и проверяет, имеет ли элемент 0 для offsetHeight и offsetWidth (например, скрытый, определяемый как «не используя пробела на странице».

IE не должен позволять display: none иметь offsetWidth и offsetHeight, поэтому корень проблемы здесь. Должен ли jquery добавить обработку для этого? возможно, уже есть ошибка, которая может быть именно вашей проблемой здесь .

Answer 2

Интересно, это как-то связано с видимым и скрытым:

visibility: hidden скрывает элемент, но все равно занимает место в макете.

display: none элемент полностью удаляется из документа.Он не занимает места, хотя HTML-код для него все еще находится в исходном коде.

(из http://webdesign.about.com/od/css/f/blfaqhidden.htm)

Что дает вам следующее?:

$('span.error:not(:hidden')[0].style.display

И

$('span.error:visible')[0].style.visibility

Вы также можете посмотреть на CSS более подробно, используя инструменты разработчика IE8 (F12).