I recently encountered this rather strange bug that only shows up in Internet Explorer 9 (haven’t tried 10, but likely there too,) but works just fine in IE8, Firefox, Safari and Chrome. Generally the HTML/CSS markup for an individual page within a normal web application can get pretty complex, so this bug took me a while to figure out what it was.
Apperently, if you have a <SELECT> box contianed within a <TABLE> (which is done fairly often with data entry interfaces,) and you have CSS that styles the table row to highlight on the mouse “HOVER” event in a way that effects the positioning of the <SELECT>, then it will be IMPOSSIBLE for the user to select a dropdown value using the mouse.
It seems that when the mouse moves out of the bounds of the table row, then the style of it changes back to the “non-Hover” state; thus changing the rendered position of the drop down box. The drop down is automatically hidden when the position of the drop down box changes causing it to be IMPOSSIBLE for the user to select a value using the mouse.
Another note on duplicating this: It seems that you need to include the HTML5 style doctype in the page, otherwise it will work correctly; even in IE9.
Don’t worry if this description is somewhat confusing, I have included a full code sample below that exhibits this bug at its most basic level.
<!doctypehtml><htmllang="en"><head><metacharset="utf-8"/><style> table tr:hover { font-weight:bold; /* -- AND/OR -- font-size:larger; */ }</style></head><body><table><tr><td>Select Value:</td><td><select><option></option><option>One</option><option>Two</option></select></td></tr></table></body></html>
Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Image may be NSFW.Clik here to view.
Clik here to view.
