html - cssホバー変更iframe位置とz-indexはIEで機能しません

Question

iframecssにカーソルを合わせるとページに機能があり、が大きくなり、前面に移動するように変更positionされます。ただし、IEでは機能しません。ホバーの変更をトリガーするのは難しく (div の境界をゆっくりと移動する必要があります)、トリガーすると拡大が失われます。z-indexiframeiframe

このための JSfiddle: http://jsfiddle.net/LWRUd/ (フィドルは正しく動作します)

CSS:

.server-unit-head{
    width: 300px;
    background-color: #ccccdd;
    font-size: 8pt;
    text-align:left;
    color:blue;
    /*This causes words to wrap on characters as opposed to white spaces*/
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

.server-unit{
    height: 300px;
    width: 300px;
    z-index: 0;
    position: relative;
}

.server-unit:hover{
    background-color: transparent;
    z-index: 50;
}

.server-unit span{ /*CSS for enlarged iframe*/
    position: absolute;
    background-color: #ccccff;
    padding: 5px;
    left: -1000px;
    visibility: hidden;
    color: black;
    text-decoration: none;
}

.server-unit:hover span{ /*CSS for enlarged iframe on hover*/
    visibility: visible;
    top: 1px;
    left: 1px; /*position where enlarged iframe should offset horizontally */
}

HTML :

<td class="server-unit-head">
    <p>${serverUnit}</p>
    <div class="server-unit">
        <p><iframe name="iFrameName" height="297" width="297" scrolling="no" src=" ${serverUnit}"><p>Your browser does not support iframes.</p></iframe>
        <span><iframe name="iFrameName" height="500" width="500" scrolling="yes" src=" ${serverUnit}"><p>Your browser does not support iframes.</p></iframe></span>
    </div>
</td>