Html 背景图像从IE11中的父Div溢出的Div

我知道在这个问题上有无数个问题，但这些问题的解决方案似乎都不适合我。这就是我的标记的外观：

<div class="immersion-div">
    <div class="immersion-div-image"></div>
</div>

子div（带图像背景）：

@media (min-width: 2000px) { .immersion-div { height: 1307px; } }
@media (max-width: 1999px) and (min-width: 1401px) { .immersion-div { height: 1000px; } }
@media (max-width: 1400px) and (min-width: 750px) { .immersion-div { height: 500px; } }
@media (max-width: 749px) and (min-width: 300px) { .immersion-div { height: 300px; } }
@media (max-width: 299px) { .immersion-div { height: 136px; } }

.immersion-div-image {
    background: url(../../bootstrap/img/homepage/spanish_immersion.jpg) no-repeat center center;
    background-size: cover;
    height: 100%;
}

作为背景的图像是2880px x 900px（虽然在这个场景中这应该是无关紧要的），我测试的屏幕分辨率是1366px宽。根据定义的媒体查询，父div的高度应评估为500px，因为屏幕属于750px-1400px类别。然而，在InternetExplorer上，div的渲染高度似乎为1000px！这个问题只会影响IE，而所有其他浏览器都能很好地处理div。有什么问题吗？在任何人建议使用

background size:contain

之前，我必须承认我尝试过，它弄乱了纵横比，在div底部留下了一个空白带，这就是我不想走这条路的原因。此外，我想了解为什么当IE在所有其他浏览器上都运行良好时，

cover

在IE上无法运行

为了以防万一，该网站是peppyburro.com，受影响的div位于主页上最后一张绿色图像上