jQuery's :hidden selector not working in IE9 Quirks Mode

Question

For the next project my team is working on, we have an ASP.NET/HTML 4 project that we're (slowly) upgrading to MVC 4.0/HTML 5. It is a requirement that this setup work on IE 9, but we can't yet fully upgrade to HTML 5 for a number of reasons.

The problem I am trying to solve involves the simple task of toggling a callout, based on the jQuery :hidden selector. While it is possible to get the callout to appear, getting it to hide is causing me some trouble.

We have an MVC partial with the following markup:

<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>

...and inside of 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();
});

...Finally, with the given 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;
}

When I run this in IE9, I can cause the callout to appear, but not to hide again. I am showing no JavaScript errors in F12 Developer Tools.

Questions: A) Are there known compatibility issues with the :hidden selector in IE9 Quirks Mode? B) If so, what would be a better vehicle to overcome these limitations?*

*: The problem in question is a little more complex than I've posted here, but our current solution uses the :hidden selector. I'm trying to preserve that if at all possible.

Answer 1

I don't see any documentation about it, but I doubt that :hidden works in QuirksMode as a psuedo selector. You probably need to instead make a direct comparison against the visibility / display state / opacity of the element.

Answer 2

jQuery does not support Quirks mode. The lowest browser they support (or have ever supported) is IE6 in Standards mode.

So the fact that something has broken is not a surprise; in fact, if anything in jQuery works in Quirks mode, you should consider it lucky.

I strongly recommend trying to bring the site into standards mode as soon as possible by adding a doctype. This doesn't necessarily mean you have to go all HTML5, but you should consider at least making the minimal switch to standards mode to be a priority.

If you're worried about your layout breaking in standards mode, try adding

* {box-sizing:border-box;}

to the top of your CSS file; this will set the standards mode box model to emulate quirks mode, and will mitigate a large portion of the layout glitches that occur due to the switch.

Hope that helps.