IE8标准模式jQuery illogic

Question

我有一个JQuery（使用JQuery 1.4.2）问题，该问题仅在IE8中以标准模式出现，在一个特定的DOM元素上出现，而在其他几乎相同的domellements上却不出现。 为什么它毫无意义的最佳示例如下：

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

上面的代码返回“ none”，除非我没有某种JQuery或IE8的错误，否则除非我患有某种脑动脉瘤，否则这是不可能的。 这仅在标准模式下的IE8中发生，而不在任何其他浏览器或IE8兼容模式下发生。 它发现的范围实际上是一个ASP.net验证控件，因此，如果控制它呈现给浏览器的内容，我的数量将非常有限。 当我使用IE8开发人员工具栏检查DOM并从DOM复制HTML时，它显示以下内容：

<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返回“无”。

编辑以回答尼克斯的评论。

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

令人费解的是，我在Jquery网站上发现了以下内容。

在jQuery 1.3.2中，如果元素在浏览器中报告的offsetWidth或offsetHeight大于0，则该元素可见。

该元素不可见，但根据上述JQuery认为是可见的。

这种变化是什么意思？ 这意味着，如果元素的CSS显示为“ none”，或者其父/祖先元素的任何显示为“ none”，或者元素的宽度为0且元素的高度为0，则该元素将被报告为隐藏。

以上就是错误的。 显示为“无”，但offsetWidth和offsetHeight不为零。

Answer 1

这似乎是一个浏览器错误，尽管jQuery是否应该处理它肯定有争议。 :visible选择器 实际上只是一个反向的:hidden选择器 ，它正在检查元素的offsetHeight和offsetWidth是否为0 （例如，隐藏被定义为“在页面中不使用空间”）。

IE不允许display: none不能具有offsetWidth和offsetHeight ，所以问题的根源就在这里。 jQuery应该为此添加处理吗？ 也许是这样，已经存在一个bug，可能正是您在这里遇到的问题。

Answer 2

我想知道这是否与可见与隐藏有关：

可见性： hidden隐藏元素，但是它仍然占用布局中的空间。

显示：无将元素从文档中完全删除。 即使它的HTML仍在源代码中，它也不占用任何空间。

（来自http://webdesign.about.com/od/css/f/blfaqhidden.htm ）

以下是什么给您？

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

和

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

您还可以使用IE8开发人员工具（F12）来更详细地了解CSS。