IE9-IE10 - 不能点击绝对定位元素答案

【问题标题】：IE9-IE10 - can't click absolute positioned elementIE9-IE10 - 不能点击绝对定位元素
【发布时间】：2013-06-29 19:59:32
【问题描述】：

我有这个搜索字段：

右边的“x”正在清除文本。它适用于除 IE9/10 以外的所有浏览器。

据我所知，一旦图标位于输入上方，它就不再可点击，就像输入覆盖它一样（尽管它是可见的）。如果我将图标向右移动一点，使其不在输入上，它会按预期运行。

我尝试更改 z-index 但没有成功。

HTML：

<div class="capbSearchPanel" data-bind="with: searchVM">
    <div class="capbWrapper">
        <a href="#" class="capbBtn capbBtnCancel cafeLeft">Cancel</a>
        <div class="capbSearchInputWrapper cafeLeft">
            <span class="capbIcon capbClearTextIcon"></span>
            <span class="capbIcon capbSearchIcon"></span>
            <input  type="search" class="capbSearchInput"  autofocus="true" placeholder="Search For Anything..."/>
        </div>
        <a href="#"><span class="capbIcon cafeLeft"></span></a>
    </div>
</div>

少：

/* SEARCH FIELD*/
.capbSearchInputWrapper{
    position: relative;
    display: inline-block;

    input{
        width: 100%;
        height: 31px;
        background-color: #fff;
        padding: 0px 26px 0 27px;
        border: solid 1px #c0c0c0;

        //iPads (landscape) -----------
        @media only screen
        and (min-device-width : 768px)
        and (max-device-width : 1024px)
        {
            padding-top: 5px;
        }
    }

    .capbIcon{
        line-height: 20px;
        position: absolute;
        top: 50%;
        width: 24px;
        margin-top: -12px;

        //iPads (landscape) -----------
        @media only screen
        and (min-device-width : 768px)
        and (max-device-width : 1024px)
        {
            margin-top: -13px;
        }

    }
    .capbSearchIcon{
        // content: url('@{capbImgPath}/icon_search_323232.svg');
        left: 5px;
        &:before{
            height: 25px;
            content: url('@{capbImgPath}/icon_search_323232.svg');  
        }       
    }

    .capbClearTextIcon{
        right: 5px;
        z-index: 10;
        &:before{
            height: 25px;   
        }
    }

}

【问题讨论】：

.capbClearTextIcon 对应的 content 是什么？我没有看到它列出，:before 需要内容才能正常工作。
是的，对不起，无论如何，内容是在不同的文件（icons.less）中定义的，所有图标都正确显示，如您所见，唯一的问题是它不可点击
授予content 在那里（基于图像），从这里提供的代码看来它应该可以工作。您能否生成一个jsfiddle 来重现该问题（我尝试过，但似乎无法重现该问题）？

标签： html internet-explorer css less

【解决方案1】：

因为您在 .capbClearTextIcon 的“之前”伪元素上设置了一个高值，所以我猜测该图标也是通过该伪元素定义的？如果这是真的，您是否尝试将图标放在真实跨度而不是伪元素中？像这样：

.capbClearTextIcon {
    background-image: url('@{capbImgPath}/icon_close_323232.svg');
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 25px;
    width: 25px;
}

【讨论】：