Question

我有这个简单的隐藏下拉列表，在Firefox和Chrome中表现完美，但在IE9中使用时，选项无法选择。

<style media="screen" type="text/css">
.MainHN{
    top:120px;
    left:184px;
    display: block;
    width: 290px;
    height:100px;
    color: #BDBDBD;
    position:absolute; 
    background-color: #FFFFFF;
}
.MainHN:hover .IntHN {
    display: block;
    }
.IntHN{ 
    display: none;
    width: 300px;
    height:150px;
    margin: 0 auto;
    position: absolute;
}
.HiddingNode{ 
    width: 250px;
    height:70px;
    margin: 0 auto;
    background-color: #FDFBFB;
    color: #BDBDBD;
    padding:2px;
    border:2px solid;
    position: absolute;
}
</style>

<div class="MainHN"> 
    <div class="IntHN">
        <div class="HiddingNode">
            <form id="FAform" action="aaaa" method="post">
                <div>
                    <select id=FAselect name=FAselect>
                        <option selected="selected" value="233">Option A</option>
                        <option value="123">Option B</option>
                        <option value="1075">Option C</option>
                    </select>
                </div>
                <div>
                    <input type="submit" value="Save">
                </div>
            </form>
        </div>
   </div>
</div>

如果我禁用了隐藏功能（显示无/阻止），但这会失效。谁知道原因？

Answer 1

<select>是替换元素，因此UI元素可能不是DOM本身的一部分。因此，当您将鼠标悬停在某个选项上时，您将不再悬停在＆＃34; main＆＃34;元素，它被隐藏起来。这会导致选择被隐藏，并且用户无法处理隐藏的选择。

对此没有简单的解决方法，但考虑在onfocus上使用<select>事件强制浏览器保持可见（将类应用于父元素？）和当然onblur取消了。

下拉选择器在IE9中不起作用

1 个答案: