Фон
Я занимаюсь разработкой веб-сайта с использованием 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, потому что представление совместимости делает ошибку исчезающей.Было бы хорошо, если бы кто-то проверил, прав я или нет, и предложил какую-то проницательность.
Если у кого-либо есть какая-либо информация по этому вопросу или предложенное исправление, я был бы очень благодарен.