背景

Question

背景

我正在使用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错误，因为兼容性视图使错误消失。如果有人验证我是对还是错并提供一些见解会很好。

如果有人对此有任何信息，或建议的修复，我会非常感激。

Answer 1

我了解到position:relative;涵盖了许多浏览器的罪行。

Answer 2

这是一个老问题，但我遇到了同样的问题并找到了修复：当我禁用标题（jquery工具提示）时，选择框现在工作正常

选择框在Internet Explorer中无法正常运行/消失

背景

问题

代码

问题

2 个答案: