IE8 标准模式 JQuery 不合逻辑

Question

我有一个 JQuery（使用 JQuery 1.4.2）问题，该问题仅在标准模式下的 IE8 中出现，在一个特定的 DOM 元素上而不是在其他几乎相同的 dom ellements 上。为什么它没有意义的最好例子如下：

$('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 显示是 “无”，或其任何父/祖先 元素的显示为“无”，或者如果 元素的宽度为 0 并且元素的 高度为 0 则元素将是 报告为隐藏。

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

Answer 1

这似乎是一个浏览器错误，尽管 jQuery 是否应该处理它肯定是有争议的。 :visible selector 真的只是一个反向 :hidden selector 并且它正在检查元素是否具有 0 用于 offsetHeight 和 offsetWidth （例如，隐藏被定义为“在页”。

IE 不应该让display: none 拥有offsetWidth 和offsetHeight，所以问题的根源就在那里。 jquery 应该为此添加处理吗？也许是这样，已经提交了一个错误，可能正是您的问题here。

Answer 2

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

可见性： 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

您还可以使用 IE8 开发工具 (F12) 更详细地查看 CSS。