Question

我理解这个问题上存在大量问题，但其中任何一个解决方案似乎都不适用于我。这就是我的标记：

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

如您所见，它是一个相当简单的设置，其中一个div包含另一个div。父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; } }

子div（带图片背景）：

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

用作背景的图像是2880像素×900像素（尽管在这种情况下这应该是无关紧要的），我测试它的屏幕分辨率是1366像素宽。根据定义的媒体查询，由于屏幕属于750px-1400px类别，因此父div的高度应评估为500px。但是，在Internet Explorer上，div似乎渲染的高度为1000px！此问题仅影响IE，而所有其他浏览器都正常渲染div。可能是什么问题呢？在任何人建议使用background-size: contain之前，我必须承认我尝试了它并且它会影响宽高比，在div的底部留下一个空白带，这就是为什么我不想走那条路。此外，我想了解为什么cover在IE浏览器上工作时不会有效。

万一它有帮助，有问题的网站是peppyburro.com，受影响的div位于主页上的最后一张绿色图片上。

Div与背景图像溢出IE11中的父div

0 个答案: