how to detect windowed <select> element

[Paul Irish]

It's well known that IE6 (and 5.5 and 5) have a "windowed" select
element. As such it's painted on top of all other elements. [1] [2]

The typical fix is an iframe shim that overlays the select and allows
arbitrary divs to lay on top without visual interruption. [3]

As iframes are particularly heavy and hurtful to page performance it
makes sense to only add it to the browsers that need it.

Which leads to...

How can you detect that the current browser demonstrates this
behavior?


[1] http://support.microsoft.com/kb/177378
[2] http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx
[3] http://web.archive.org/web/20080125....com/WebLog/jking/archive/2003/07/21/488.aspx

 

[David Mark]

It's well known that IE6 (and 5.5 and 5) have a "windowed" select
element. As such it's painted on top of all other elements. [1] [2]
Yes.


The typical fix is an iframe shim that overlays the select and allows
arbitrary divs to lay on top without visual interruption. [3]
Right.


As iframes are particularly heavy and hurtful to page performance it
makes sense to only add it to the browsers that need it.

Absolutely. Adding an IFrame is a very costly operation as it is a
whole new window, document. etc.

Which leads to...

How can you detect that the current browser demonstrates this
behavior?

You can't. But no worries as MS included a mechanism for working around
quirks in various IE versions. If you have a function that displays a
positioned DIV, write a wrapper for it that adds an IFrame. Include it
in a separate file and wrap the SCRIPT element in a conditional comment
that targets only IE < 7. All other browsers (including IE >= 7) will
treat it as a comment. It's 100% reliable (a rarity in this business).

On the other hand, to "solve" this problem, the "major" libraries eschew
the perfect solution for browser sniffing, which couldn't be more
absurd. Why do they do this? Because you can't bottle conditional
comments in a "cool" script. Needless to say, don't go that route.

 

[Paul Irish]

Include it
in a separate file and wrap the SCRIPT element in a conditional comment
that targets only IE < 7.  

That works. I was curious if there was a detection technique
available, but if the only option is conditional comments, then that's
how it must be.

Thanks

 

[David Mark]

That works. I was curious if there was a detection technique
available, but if the only option is conditional comments, then that's
how it must be.

If you absolutely, positively had to do it in script, you could use a
similar mechanism called conditional compilation plus a multiple
object inference to "detect" the version. Off the top of my head,
this inference (when wrapped in conditional compilation) should
identify IE < 7.

!this.XMLHttpRequest && typeof document.documentElement.style.maxWidth
== 'undefined'

The second bit may be unnecessary (and is fallible in IE7/8 quirks
mode), but I can't remember whether there is a configuration of later
IE versions that makes XMLHttpRequest vanish (IIRC, it can only be
rigged to blow up on construction). In any event, avoid quirks mode
at all costs as this is but one of its many caveats.

If you can't use conditional compilation (it does foul up minifiers),
you can add more checks like window.external, typeof
window.external.addFavorite == 'unknown', etc.

But, unless it is unfeasible for your project, I would stick with the
conditional comments.

 

[David Mark]

As long as `this.XMLHTTPRequest` is not a user-defined function (in
IE<7), in which case test would result in a false positive.
Right.


I'm pretty sure XMLHttpRequest object stays as it is, once you disable
it in the options, but yes, instantiation throws.

And come to think of it, that really should have been a typeof test.
It's typically methods that blow up on type conversion, but best to be
safe and treat them all as potentially explosive.

typeof "unknown" check seems like a relatively solid inference to
*detect IE in general*, given that no other browser is known to report
anything like that. But then there are future concerns, such as IE
getting rid of COM-based host objects (and so probably eliminating
typeof "unknown", naturally).

Sure, but that won't affect detection of IE6. Would actually strengthen
the case.

You can see one of IE engineers mention IE9 dropping COM as an object
model
(<http://channel9.msdn.com/posts/Charles/IE-9-First-look-at-the-new-JS-Engine/>,
starting from ~5th minute).

It's about time.