Предыстория

Я разрабатываю сайт с использованием jQuery, jQuery Validation и jQuery Autocomplete. Я разрабатываю форму, которая использует валидацию для обеспечения валидности нескольких элементов формы, автозаполнение для заполнения текстового поля, а затем AJAX для динамической замены формы. Форма содержит несколько элементов формы, включая несколько выпадающих списков (...). Поля списков оформлены с помощью CSS3 (с Modernizr для обратной совместимости).

Проблема

Проблема связана с Internet Explorer. Я тестирую в IE9, но не думаю, что это работает в IE7 или IE8. Есть два выпадающих поля выбора, и оба работают неправильно. Когда пользователь нажимает на выпадающую стрелку, чтобы показать список вариантов для выбора, список исчезает, как только мышь перемещается по нему, чтобы сделать выбор, как если бы пользователь щелкнул мышью (но без выбора).

Другие примечания:-

• Поля ведут себя правильно во всех других браузерах.
• Поля стилизованы с помощью CSS3.
• Если я переключу режим совместимости, ящики работают как надо, хотя выглядят ужасно.

Код

HTML

<form name="form1" action="#" method="post" id="form1">
    <fieldset>
        <label for = "radio1">
            <input type="radio" id="radio1" name="type" value="1" checked = "checked" />
            Sell</label>
        <label for = "radio2">
            <input type="radio" id="radio2" name="type" value="2" />
            Buy</label>
    </fieldset>

    <label>Address or zipcode</label>
    <input name="address" id="address" type="text" size="40" placeholder="Address or zipcode" class="ui-helper-clearfix" />

    <label>Second Option</label>
    <select name="first_option" id="first_option">
        <option value="" disabled="disabled">Select Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>

    <label>Second Option</label>
    <select name="second_option" id="second_option">
        <option value="" disabled="disabled">Select Option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 1</option>
        <option value="3">Option 1</option>
        <option value="4">Option 1</option>
        <option value="5">Option 1</option>
        <option value="6">Option 1</option>
        <option value="7">Option 1</option>
        <option value="8">Option 1</option>
        <option value="9">Option 1</option>
    </select>

    <input name="submitbutton" type="submit" value="Submit" />
</form>

CSS

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
label{display:none;font: 100 italic 1.2em/1em "museo-sans";}
label[for=radio1], label[for=radio2]{display: inline-block;margin-right: 1em;padding: 0.7em 0;}
input, select, input[type=placeholder]{color:#666}
select, input, textarea, datalist{ outline: none;font:100 italic 1.2em/1em "museo-sans";margin:0 0 0.5em} 
datalist, select, input[type=text], input[type=email], input[type=tel], textarea{padding: 2%;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;border: 1px solid #CCC;width: 96%;background:#fff}
select{width:100%}
input[type=submit], input[type=button], a.button, button {
color: #fff;border: none;width:100%;text-align:center;padding: 0.8em 0;font-size:1.3em;font-weight:700;font-style:normal;text-transform:uppercase;background: #ed4136;border: none; 
-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;cursor:pointer;margin-bottom:0}

Вопрос

Кто-нибудь знает, это ошибка скрипта или ошибка CSS? Я пробовал искать в интернете похожие проблемы, но не нашел никаких зацепок. Было бы неплохо просто получить представление о том, какие вещи могут вызывать эту ошибку.

У меня есть предположение, что это ошибка CSS, потому что при просмотре совместимости ошибка исчезает. Было бы хорошо, если бы кто-нибудь проверил, прав я или нет, и высказал свое мнение.

Если у кого-нибудь есть какая-либо информация об этом или предложение по исправлению, я буду очень благодарен.