IE 8 Compatibility Issue with YUI 2 Selector Component

I realized recently, in my work on Mint.com, that the YAHOO.util.Selector.query function does not work properly in IE 8 compatibility mode when performing a search against the class and for attributes. The issue is that previous versions of IE defined these attributes names as className and htmlFor, while IE 8 changed them to follow the standard. And a faulty if statement in the selector component does not properly use the legacy names when developers apply the X-UA-Compatible META tag to set compatibility modes.

The Problem…

The selector utility is using the following code:

if (YAHOO.env.ua.ie && YAHOO.env.ua.ie < 8) { // rewrite class for IE < 8

However, according to the IE blog, this wont work:

http://blogs.msdn.com/ie/archive/2009/02/16/just-the-facts-recap-of-compatibility-view.aspx

When using the server-driven X-UA-Compatible META tag, due to technical reasons, the user-agent string is not changed. This means that the if statement will evaluate to false, thinking that the browser is IE 8, even though the server has indicated the use of another version of IE. However, IE 8 has introduced a new property document.documentMode, which can be used to handle this situation. The document.documentMode will be the version of IE specified via the X-UA-Compatible META tag.

The Solution…

Change the code in selector.js to:

if(YAHOO.env.ua.ie && ((!document.documentMode && YAHOO.env.ua.ie<8) || document.documentMode < 8)){// rewrite class for IE < 8

If the document.documentMode does not exist, default to the user-agent string, otherwise, use the document.documentMode to evaluate the version of IE.

Theres More…

Perhaps future versions of YUI will take the document.documentMode into consideration when evaluating the user-agent, but for now we must apply this patch to fix the selector component in IE 8.

A big thanks goes out to Kaven Yan who first fixed this issue.