Html IE9和IE10的兼容性问题？

我有一个图像，当鼠标悬停在上面时，会出现带有文本的块，这是可以看到的

这方面的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>

.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之外的所有浏览器的所有版本中都可以正常工作

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

---

谢谢。

你在那里申请的是负保证金。在我看来是不对的。你能在JSfiddle.net或Codepen.io中简化一下吗？我现在还不能在IE中测试这个，但是你最好使用团队想象作为背景，并在上面隐藏覆盖层。这应该给你的基本想法，让你开始@Paulie_D-没错，我想我应该让包装器位置相对，我们的团队块位置绝对，而不是负边距，这样会把它放在顶部0和左侧0，不是吗？我会使用一个块绝对定位在图像上，100%高，100%宽。然后你可以在它里面使用任何你想要的HTML，包括浮动等等。@RichardDenton我已经尝试过你的建议（我本来应该尝试一下，不知道为什么我会这样做），它加载得更快，也有人在IE9和IE10中为我测试过，但我觉得这会很好，谢谢。