选择框在 Internet Explorer 中不起作用/消失

Posted

技术标签:

【中文标题】选择框在 Internet Explorer 中不起作用/消失【英文标题】:Selection box not functioning / disappearing in Internet Explorer 【发布时间】:2012-01-04 18:00:10 【问题描述】:

背景

我正在使用 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; 
labeldisplay: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], textareapadding: 2%;-moz-border-radius: 6px;-webkit-border-radius: 6px;border-radius: 6px;border: 1px solid #CCC;width: 96%;background:#fff
selectwidth: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 错误,因为兼容性视图使该错误消失了。如果有人验证我是对是错并提供一些见解,那就太好了。

如果有人对此有任何信息或建议的修复方法,我将非常感谢。

【问题讨论】:

问题,问题,代码? 您需要先发布代码,然后其他人才能评估您提出的问题。 感谢您指出这一点。添加了代码。 @Fixxxer,使用您提供的代码,我没有遇到您描述的问题(对于 IE7-9 一切正常)。这告诉我问题必须与您未提供的页面上的其他 css 进行交互。 感谢您的意见,斯科特。我将尝试通过删除 CSS 的某些部分来调试它。 【参考方案1】:

我了解到position:relative; 涵盖了很多 ie 浏览器的问题。

【讨论】:

这有什么帮助。你做了什么?【参考方案2】:

这是一个老问题,但我遇到了同样的问题并找到了解决方法:当我禁用标题(jquery 工具提示)时,选择框现在可以正常工作了

【讨论】:

以上是关于选择框在 Internet Explorer 中不起作用/消失的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 属性选择器在 Internet Explorer 中不起作用

:visible 选择器在 Internet Explorer 中不起作用

表单中的下拉选择在 Internet Explorer 中不起作用

jquery ui对话框中的基础日期选择器在Internet Explorer中不起作用

Datepicker minDate 和 maxDate 在 Internet Explorer 中不起作用

Internet Explorer 中不显示自定义字体