Question

I have a JQuery (using JQuery 1.4.2) problem that exhibits only in IE8 in standards mode, on one specific DOM element but not on other nearly identical dom ellements. The best example of why it makes no sense is below:

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

The above piece of code returns “none” which unless i am having some sort of brain aneurism is impossible without there being a bug in either JQuery or IE8. This only occurs in IE8 in standards mode, not in any other browser or on IE8 compatiblity mode. The span that it finds is actually an ASP.net validation control so i only have a limited amount if control over what it renders to the browser. When i inspect the DOM using IE8 developer toolbar and copy the HTML from the DOM it gives me the below:

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

If i just do a view source and copy and paste it i get the below:

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

If i create a simple HTML file containing just either of the above pices of HTML then $('span.error:visible') does not find the spans and i am unable to post code to be able to reproduce this problem. But in the actual asp.net page if i run $('span.error:visible')[0].style.display it returns “none” and if i run $('span.error:visible').text() it returns “JQuery should not
find this”.

tl;dr How can $('span.error:visible')[0].style.display return “none”.

Edit to answer Nicks comment.

$('span.error:visible')[0].offsetWidth returns 3
$('span.error:visible')[0].offsetHeight returns 22

Which is puzzling, i found the below on the Jquery site.

In jQuery 1.3.2 an element is visible
if its browser-reported offsetWidth or
offsetHeight is greater than 0.

THe element isn’t visible, but acording to the above JQuery thinks it is.

What does this change mean? It means
that if your element’s CSS display is
“none”, or any of its parent/ancestor
element’s display is “none”, or if the
element’s width is 0 and the element’s
height is 0 then an element will be
reported as hidden.

So is the above just wrong. Display is “none” but offsetWidth and offsetHeight are not zero.

Answer 1

This appears to be a browser bug, though whether jQuery should handle it is certainly up fo debate. The :visible selector is really just a reverse :hidden selector and it’s checking if the element has a 0 for offsetHeight and offsetWidth (e.g. hidden being defined as “using no space in the page”.

IE shouldn’t allow display: none to have an offsetWidth and offsetHeight, so the root of the problem is there. Should jquery add handling for this? perhaps so, there’s already a bug filed which may be exactly your issuehere.