IE 9 不尊重我的覆盖并仅将 css 应用于包含的元素

Question

所以经过一些挖掘我不确定这里的问题是什么。我有一个覆盖有 div 的文本字段。 div 包含一个带有多个 li 的 ul，表示当前应用到 table 的过滤器。叠加层应该捕捉点击以打开菜单并保留任何新过滤器。

编辑：

明确需要专门针对 IE9。由于某种原因，叠加层不是前景。我可以专门单击 li 并获得我期望的行为，但是在叠加层似乎不存在的中间和末尾有 space。

--我的代码--

HTML:

<!-- Start filter row-->
<div class="row collapse">
    <div class="small-3 medium-2 large-1 columns">
        <span class="prefix">Current Filters:</span>
    </div>
    <div class="small-9 medium-10 large-11 columns">
        <div id="manager_filter_overlay" class="filter_overlay">
            <ul>
                <li class="filter_item">Status: Active</li>
                <li class="filter_item">Start Date: 07/MAR/2014</li>
                <li class="filter_item">End Date: 07/APR/2014</li>
            </ul>
        </div>
        <input type="text" onkeydown="return false;" style="z-index:0;">
    </div>
    <div class="filter-menu">
        <div class="arrow-up"></div>
        <div class="filter-menu-container">
            <ul>
                <li>
                    <label>Status:
                        <select>
                            <option>
                                Active
                            </option>
                            <option>
                                Deleted
                            </option>
                        </select>
                    </label>
                </li>
                <li>
                    <label>Start Date:
                        <input type="text" placeholder="DD/MMM/YYY">
                    </label>
                </li>
                <li>
                    <label>End Date:
                        <input type="text" placeholder="DD/MMM/YYY">
                    </label>
                </li>
            </ul>
            <div class="row">
                <div class="large-12 center columns">
                    <input type="button" class="button tiny blue" value="Search">
                    <input type="button" class="button tiny blue" value="Reset">
                    <input type="button" class="button tiny blue" value="Save">
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End filter row-->

CSS:

.filter_overlay{
    position:absolute;
    height:37px;
    width:100%;
    /*border:1px solid black;*/
}
.filter_overlay:hover{
    cursor:pointer;
    }

.filter_overlay ul{
    margin:0;
    list-style: none;
    margin-left:5px;
}
.filter_overlay ul li{
    display:inline-block;
    /*border: 1px solid blue;*/
    margin-top:10px;
    padding-right:5px;
    font-size:12px;
}

除 IE9 之外的所有浏览器似乎都符合我的预期。当鼠标悬停在文本框上时，我的光标是一个指针，我单击并显示下拉列表（不包括 JS，它是非常基本的，我认为没有任何影响问题）。然而，在 IE9 中，当鼠标悬停在 li 上方时，只显示一个指针，而在 li 之外时，它能够到达文本字段。

Answer 1

不知道你到底在说什么，但我想，哈哈。

不管怎样，如果你想要默认光标无处不在，试试这个：

*:hover {
    cursor: default;
}

或者如果刚刚超过要点，请尝试：

li:hover {
    cursor: default;
}

希望这有效:D

Answer 2

经过进一步调查，这似乎与背景有关。如果没有它，基于下面的两个线程，就会出现 z-index 问题。虽然他们建议使用

background:white; filter:alpha(opacity=1);

我无法从中看到结果。

我所做的只是添加了背景和 1px 边框。

IE z-index trouble on element with transparent background

z-index problem in IE with transparent div

IE 9 不尊重我的覆盖并仅将 css 应用于包含的元素

IE 9 is not respecting my overlay and applying css to contained elements only

html

css

internet-explorer