0

对于我的团队正在进行的下一个项目，我们有一个 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 错误。

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

*：有问题的问题比我在这里发布的要复杂一些，但是我们当前的解决方案使用了:hidden选择器。如果可能的话，我会尽量保留它。

4

2 回答 2

2

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

所以有些东西坏了并不奇怪。事实上，如果jQuery 中的任何东西在 Quirks 模式下工作，你应该认为它是幸运的。

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

如果您担心您的布局打破标准模式，请尝试添加

* {box-sizing:border-box;}

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

希望有帮助。

于 2013-07-31T14:13:04.970 回答
1

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

于 2013-07-31T14:03:08.713 回答