IE下input框遮挡了按钮

在做搜索框的时候打算用position:absolute;将按钮放在input框上，但是IE9和IE8中，按钮始终被input压在后面。

效果图

HTML结构如下：

   <div class="sidebar-search" id="siderbar-search">
        <input type="text" placeholder="功能搜索" id="sidebarSearchInput" onkeypress="sidebarSearchKeypress();"/>
        <span class="sidebarSearchBtn" onclick="sidebarSearch(event);" id="sidebarSearchBtn"></span>
        <div class="dropdown-menu"><ul></ul></div>
  </div>

CSS：

.sidebar-search {
    margin: 5px;
    position: relative;
}
.sidebar-search input[type="text"] {
    border: 0;
    width: 100%;
    box-sizing: border-box;
    font-size: 13px;
    outline: none;
        background: #fff url(../img/5.png) 98% center no-repeat;
        padding-right: 28px;
}
.sidebarSearchBtn {
    position: absolute;
    width: 28px;
    height: 30px;
    background: transparent;
    right: 5px;
    top: 5px;
    z-index: 10;
    cursor: pointer;
}

解决办法：
1. 给按钮加个背景，比如：background: #fff;(background:transparent;无效)
2. 将.sidebar-search input的背景放到外层div上（.sidebar-search），给input设置小一点的宽度，给按钮留出位置。

.sidebar-search {
    margin: 5px;
    position: relative;
    background: #fff url(../img/5.png) 98% center no-repeat;
    border: 1px solid #d5d5d5;
}
.sidebar-search input[type="text"] {
    border: 0;
    width: 172px;
    box-sizing: border-box;
    font-size: 13px;
    outline: none;
}
.sidebarSearchBtn {
    position: absolute;
    width: 28px;
    height: 30px;
    background: transparent;
    right: 0px;
    top: 0px;
    z-index: 10;
    cursor: pointer;
}

参考：http://blog.csdn.net/zhouruitao/article/details/6038008