pole wyboru nie działa/znikają w Internet Explorer

Question

Tło

Zajmuję się tworzeniem strony internetowej przy użyciu jQuery, jQuery Validation i jQuery autouzupełniania. Opracowuję formularz, który używa sprawdzania poprawności, aby upewnić się, że kilka elementów formularza jest poprawnych, autouzupełnianie w celu wypełnienia pola tekstowego, a następnie AJAX, aby dynamicznie zastąpić formularz. Formularz zawiera kilka elementów formularza, w tym niektóre listy rozwijane (...). Pola listy są oznaczone stylem CSS3 (z Modernizr dla zgodności wstecznej).

Problem

Problem dotyczy przeglądarki Internet Explorer. Testuję z IE9, ale nie sądzę, że działa również w IE7 lub IE8. Są dwa rozwijane pola wyboru i oba działają nieprawidłowo. Kiedy użytkownik kliknie strzałkę w dół, aby wyświetlić listę opcji do wyboru, lista znika, gdy tylko mysz przesunie się nad nią, aby dokonać wyboru, tak jakby użytkownik kliknął myszą (ale bez dokonania wyboru).

Inne uwagi: -

• Skrzynki zachowywać się właściwie w każdej innej przeglądarce.
• Pola są stylizowane za pomocą CSS3.
• Jeśli przełączam widok zgodności, pola działają tak, jak powinny, chociaż wyglądają okropnie.

Kodeks

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} 

Pytanie

Czy ktoś wie, czy jest to błąd skryptu lub błąd CSS? Próbowałem przeszukiwać Internet w poszukiwaniu podobnych problemów, ale nie mam żadnych potencjalnych klientów. Byłoby dobrze po prostu uzyskać wgląd w to, co może powodować błąd.

Mam przeczucie, że to błąd CSS, ponieważ widok zgodności sprawia, że ​​błąd znika. Byłoby dobrze, gdyby ktoś zweryfikował, czy mam rację, czy nie, i zaoferuję wgląd.

Jeśli ktokolwiek ma jakiekolwiek informacje na ten temat lub sugerowaną poprawkę, byłbym bardzo wdzięczny.

Answer 1

Dowiedziałem się, że position:relative; obejmuje wiele np. Grzechów przeglądarki.

Answer 2

To stara sprawa, ale miałem ten sam problem i okazało poprawkę: kiedy wyłączony tytułowego (jQuery tooltip) select box działa teraz