css - IE-7 图像没有出现在顶部

Question

我正在显示onmouseover一个 div 的工具提示。工具提示在 Firefox 和 IE8 中正确显示。但在 IE-7 中，它落后于 div。HTML 标记

<table cellspacing="0" cellpadding="5" border="0" id="tblEmployee">
<tbody>
<tr>
<td>
<div class="dvBorder" empid="1" nomineeid="21">
<img style="padding: 5px;" src="../../Images/user.jpg" alt="user">
<span class="EmpolyeeName">First Last</span><span class="EmployeeEmail">mail@amdocs.com</span></div></td>
</tr>
</table>

当用户将鼠标悬停在 div.dvBorder 上时，工具提示是在 jquery 函数的帮助下动态创建的。

 function RollOut(result,crntDiv) {
            $(crntDiv).children('img').before(CreateElems('div', 'RollOverTip', result));
        }

function CreateElems(type,cssClass,value)
        {
            var elem = $(document.createElement(type));

            if(value != null)
                elem.text(value);

            if(cssClass!= null)
                elem.addClass(cssClass);

            return elem;
        }

CSS类。

.RollOverTip
{
    background-image: url("/Images/screen2-rollover-tooltip.png");
    background-repeat: no-repeat;
    color: #000000;
    font-family: Calibri Regular;
    font-size: 18pt;
    height: 199px;
    line-height: 20pt;
    margin-left: 385px;
    position: absolute;
    width: 474px;
    z-index: 90000;
    padding:34px;
}

.dvBorder
{
    background-image: url(/Images/screen2-button.png);
    background-repeat: no-repeat;
    height: 125px;
    width: 400px;
    cursor:pointer;
    position: relative;
}

这是 css 的问题吗，因为它在 IE-8，FF 中工作。

Answer 1

尝试将 z-index 添加到您的 .dvBorder 类中：

.dvBorder
{
    background-image: url(/Images/screen2-button.png);
    background-repeat: no-repeat;
    height: 125px;
    width: 400px;
    cursor:pointer;
    position: relative;
    z-index:0; /* If this doesn't work, try -1 */
}