select tag in IE - correct design

Question

I read very many questions and blogs about design select-option-list at IE explorer. None of them give me answer to the simple question:

Why IE view the select options in hiding the top input? And if the selectedOption is not the first - the situation is worse: the optionList compose is higher then the input itself .

See the pictures:

The list hide the input:

The situation is worse when the selected item is not he first option:

And in chrome - All is OK:

Answer 1

This is the default behavior of select tag in IE10. On the basis of the option selected, the select list is rendered accordingly. You cannot control this directly but if you really want to, you can detect the overflow outside viewport and re-position the list accordingly. Another quick fix can be to use a javascript based select (plugins such as chosen) or you can even manually change the position of the selected option to first one if you want a hack-ish way of solving this.