Seçim kutusu Internet Explorer

Question

Arka Plan

jQuery, jQuery Doğrulama ve jQuery Otomatik Tamamlama kullanılarak bir web sitesi geliştiriyorum içinde kaybolan/çalışmıyor. Birkaç form öğesinin geçerli olduğundan emin olmak için doğrulama, bir metin kutusunu doldurmak için otomatik tamamlama ve formun dinamik olarak değiştirilmesi için AJAX kullanan bir form geliştiriyorum. Form, bazı açılan liste kutuları (...) dahil olmak üzere birkaç form öğesi içerir. Liste kutuları CSS3 ile tasarlanmıştır (geriye dönük uyumluluk için Modernizr ile).

Sorun

Sorun Internet Explorer ile ilgilidir. IE9 ile test ediyorum ama IE7 veya IE8'de de işe yaramadığını düşünüyorum. İki aşağı açılan seçim kutusu vardır ve her ikisi de arızalıdır. Kullanıcı, seçilebilir seçeneklerin listesini göstermek için açılır oku tıklattığında, kullanıcı fareyi tıklattı (ancak seçimi yapmadan) gibi bir seçim yapmak için fare üzerinde hareket ettiği anda liste kaybolur.

Diğer notlar: -

• kutuları her tarayıcıda düzgün şekilde çalışır.
• Kutular CSS3 kullanılarak tasarlanmıştır.
• Uyumluluk ayarını değiştirirseniz, kutuları göründüğü gibi çalışırlar, ancak korkunç görünüyorlar.

Kod

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} 

Soru

herkes bu senaryo hata ya CSS hata olup olmadığını biliyor mu? Web'i benzer sorunlar için aramayı denedim, ancak hiçbir potansiyeliniz yok. Ne tür şeylerin hataya sebep olabileceğine dair bir fikir edinmek iyi olur.

Uyumluluk görünümü, hatayı ortadan kaldırdığı için bir CSS hatası olduğunu anladım. Birisi doğru ya da yanlış olduğumu doğrulayan ve biraz anlayış sunsa iyi olur.

Bunun hakkında herhangi bir bilgisi varsa veya önerilen bir düzeltme çok müteşekkir olur.

Answer 1

position:relative;'un bir çok tarayıcı günlüğünü kapsadığını öğrendim.

Answer 2

Bu eski bir sorudur, ama aynı problem vardı ve düzeltme bulundu: Ben başlık (jquery ipucu) devre dışı olduğunda seçme kutusu şimdi