I was testing my application in IE10 and found a strange behavior for select box. The option selected is highlighted and options above/below are displayed above/below the selected one. The drop down box is hidden.
This happens only in IE10. In all other browsers, options are displayed below the select box.
Try with below sample code in IE10 and IE9:
<!DOCTYPE html>
<html>
<body>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>
Is there any way to make the options below the select box like usual or there is any hack for IE10?
Thanks.
This is the default behavior for this control in Internet Explorer 10. Depending on the number of items in the list and the size of the screen, other browsers will display the menu differently as well - though I think IE10 is the only browser that will balance the number of items above and below the select element when the dropdown is opened.
Use
<select size="1"> to force a single line visible. This is not an IE10 specific hack but works across the board.
One of the advantages of the new behavior in IE10 is that it makes touch interaction much easier. Also, it is consistent with how the rest of Windows behaves. There are currently no ways to change this behavior. I have passed the feedback to the IE team.
I was looking to fix the same issue in a site... I found that the latest telerik controls work "correctly" or more correctly "the IE9 way" in IE10.. :-)
I haven't worked with this latest version, nor do I work for Telerik, so don't shoot the messenger if it causes you pain..
http://demos.telerik.com/aspnet-ajax/dropdownlist/examples/overview/defaultcs.aspx
来源：https://stackoverflow.com/questions/14157108/ie10-select-box-issue