IE9和IE10的兼容性问题？

Question

我有一张图片，当它悬停在上面时，会出现带有文字的图块，可以看到here。

这个的HTML是：

<div class="ourteamimg">
    <img src="<?php bloginfo('template_url'); ?>/images/ourteam1.jpg" alt="Our Team"/>
<div class="ourteamblocks">
<div class="ourteamblock first"><h2>Management Team</h2>
<p><?php the_field('box1'); ?></p></div>
<div class="ourteamblock second"><h2>Development Team</h2>
<p><?php the_field('box2'); ?></p></div>
<div class="ourteamblock third"><h2>Support Team</h2>
<p><?php the_field('box3'); ?></p></div>
<div class="ourteamblock fourth"><h2>Marketing Team</h2>
<p><?php the_field('box4'); ?></p></div>
<div class="ourteamblock fifth"><h2>Training Team</h2>
<p><?php the_field('box5'); ?></p></div>
<div class="ourteamblock sixth"><h2>Contractor Team</h2>
<p><?php the_field('box6'); ?></p></div>
</div>
<div class="clear"></div>
</div>

这个的CSS是：

.ourteamblocks {
margin-top: -740px;
}
.ourteamblock {
display: block;
height: 327px;
width: 286px;
float: left;
text-indent: -9999px;
position: relative;
padding: 15px;
text-align: center;
font-weight: 300!important;
}
.ourteamblock.third, .ourteamblock.sixth {
width: 288px;
}
.ourteamblock:hover {
background: #63C80A;
color: #fff;
text-indent: 0;
}
.ourteamblock:hover p, .ourteamblock:hover h2 {
position: relative;
}

除了IE9和IE10之外，所有浏览器的所有版本都可以正常使用。

这是一个非常简单的显示无和悬停显示块所以我不明白为什么这种方法不起作用，但如果有人能够对此有所了解，那就太棒了。

感谢。