iframe改变不了css,css悬停改变iframe位置和z-index在IE中不起作用

当我将鼠标悬停在iframe上时，我的页面上有一项功能css会更改position和z-index，以便iframe变得更大并移到前面。但它不会在IE中工作。很难让悬停变化触发(我必须在div的边界上缓慢移动)，当它触发时，忽略了放大的iframe。

JSfiddle for this：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：

${serverUnit}

Your browser does not support iframes.

Your browser does not support iframes.