Oh how I love working with IE browsers. Sure, IE6 is pretty much dead and buried – wasn't that a fun period in browser evolution – but now we grapple with IE7, IE8 and IE9. And the good folks at Microsoft at least have now been kind enough to add th F12 Developer Tools window where we can emulate back versions.
All this was thrown into stark highlight last week when I came across an interesting quirk, with someone running IE7, viewing an SSL secured page, containing a set of input fields, and styled using CSS that included a file called 'ie-css3.htc' from http://fetchak.com/ie-css3/.
Problem was he couldn't even move cursor focus onto thos fields, let alone type anything into the boxes. Everything was completely fine in every other browser and version and platform.
Turns out the author was prescient:
You will probably run into issues with z-index, especially if embedding one IE-CSS3 enabled element inside of another. There are two simple workarounds:
Set the z-index of the IE-CSS3 element to a number larger than its surrounding elements.
We did just that, and changed the z-index of the input field class to 9999 instead of 0 and all was good.
It's the little quirks that make me laugh.