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 inselector.jsto:
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 thedocument.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.
See Also
- The open ticket on this issue, http://yuilibrary.com/projects/yui2/ticket/2528006