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模式下运行，你应该认为它很幸运。

我强烈建议您尝试通过添加doctype尽快使网站进入标准模式。这并不一定意味着您必须使用所有HTML5，但您应该考虑至少将最小切换到标准模式作为优先考虑。

如果您担心标准模式下的布局中断，请尝试添加

* {box-sizing:border-box;}

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

希望有所帮助。

Answer 2

我没有看到任何关于它的文档，但我怀疑：隐藏在QuirksMode中作为伪随选择器。您可能需要直接与元素的可见性/显示状态/不透明度进行比较。

jQuery：隐藏选择器无法在IE9 Quirks模式下工作

2 个答案: