javascript - jQuery 的 :hidden selector not working in IE9 Quirks Mode

Question

对于我的团队正在进行的下一个项目，我们有一个 ASP.NET/HTML 4 项目，我们正在(缓慢)升级到 MVC 4.0/HTML 5。要求此设置在 IE 9 上运行，但由于多种原因，我们还无法完全升级到 HTML 5。

我试图解决的问题涉及基于 jQuery :hidden 选择器切换标注的简单任务。虽然可以让标注出现，但将其隐藏却给我带来了一些麻烦。

我们有一个带有以下标记的 MVC 部分:

<link rel='stylesheet' href='my-styles.css' />

<h4>Information</h4>
<div>
    @Html.LabelFor(m => m.PersonName, "Person's Name")
    @Html.InputFor(m => m.PersonName)
    <a href='#' id='info-link'>[ ! ]</a>
</div>

<div id='info-callout' class='callout hidden'>
    <div class='callout-before'></div><div class='callout-main'>
        This is the name of the person this form refers to.
    </div>
</div>

<script src='this-form.js'></script>

...以及 this-form.js 内部:

var MyTeamCallout = function($control, $callout) {
    var pub = {};
    pub.$control = $control;
    pub.$callout = $callout;

    pub.RegisterClickEvent = function () {
      pub.$control.click(function () {
          e.preventDefault();
          e.stopPropagation();

          // Repositioning of the control removed for purposes of this post.
          if(pub.$callout.is(':hidden')) {
              pub.$callout.show();
          }
          else {
              pub.$callout.hide();
          }
      });
    }

    return pub;
};

// --- Functional Code... -----------------------------------
var $link = $('#info-link'),
    $callout = $('#info-callout');

$(document).ready(function () {
    var calloutObject = new MyTeamCallout($link, $callout);
    calloutObject.RegisterClickEvent();
});

...最后，使用给定的 CSS:

.hidden {
    display: none;
}

.callout {
    position: absolute;
    z-index: 2;
    /* Left/Top assigned by JavaScript, normally */
}

.callout-before {
    position: absolute;
    top: 0.5em;
    left: -1em;

    /* SNIP: Borders are used to create a CSS triangle. */
}

.callout-main
{
    position: absolute;
    top: 0;
    width: 10em;
}

当我在 IE9 中运行它时，我可以使标注出现，但不会再次隐藏。我在 F12 开发人员工具中没有显示 JavaScript 错误。

问题:A) IE9 Quirks 模式中的 :hidden 选择器是否存在已知的兼容性问题？B)如果是这样，克服这些限制的更好方法是什么？*

*:所讨论的问题比我在这里发布的要复杂一些，但我们当前的解决方案使用 :hidden 选择器。如果可能的话，我会尽力保留这一点。

Answer 1

jQuery 不支持 Quirks 模式。他们支持(或曾经支持)的最低浏览器是标准模式下的 IE6。

因此，某些东西损坏的事实并不奇怪；事实上，如果 jQuery 中的任何东西都可以在 Quirks 模式下工作，那么您应该认为它很幸运。

我强烈建议尝试通过添加文档类型尽快使站点进入标准模式。这并不一定意味着您必须全部采用 HTML5，但您至少应该考虑优先考虑尽可能少地切换到标准模式。

如果您担心布局在标准模式下会被破坏，请尝试添加

* {box-sizing:border-box;}

到 CSS 文件的顶部；这会将标准模式盒模型设置为模拟怪异模式，并将减轻由于切换而发生的大部分布局故障。

希望有帮助。