Question

我正在展示div的工具提示onmouseover。工具提示在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 */
}

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

1 个答案: