背景

我正在開發一個使用jQuery，jQuery Validation和jQuery Autocomplete的網站。我正在開發一個表單，它使用驗證來確保一些表單元素是有效的，自動完成填充文本框，然後AJAX來動態替換表單。該表單包含一些表單元素，包括一些下拉列表框（...）。列表框用CSS3風格化（與Modernizr爲了向後兼容）。選擇框無法正常工作/在Internet Explorer中消失

問題

問題出在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錯誤，因爲兼容性視圖使該bug消失。如果有人確認我是對還是錯，並提供一些見解，這將是一件好事。

如果任何人有任何關於此的任何信息，或建議的修復，我會非常感激。

來源

2011-11-23 blockchaindev

工作得很好的問題，這個問題，代碼？ –

您需要在任何人評估您提交的問題之前發佈代碼。 –

謝謝你指出這一點。已添加代碼。 – blockchaindev

我知道position:relative;涵蓋了很多ie瀏覽器的罪惡。

來源

2012-12-04 05:54:11

謝謝錢德拉:) –

這是如何幫助。你做了什麼？ – Paddy

這是一個老問題，但我有一個同樣的問題，找到了解決：當我禁用了標題（jQuery的工具提示）選擇框現在

來源

2015-07-30 16:44:50 phpmydev

選擇框無法正常工作/在Internet Explorer中消失

背景

問題

守則

問題

回答

相關問題