背景图片未在Firefox / IE / Edge中延伸到容器的全部高度

Question

我对Firefox / IE / Edge浏览器读取的百分比高度与Chrome浏览器不同的事实感到困惑。

每当在fig元素旁边的Div元素中添加更多内容时，我希望我的fig元素能够拉伸到其容器的整个高度。

这是HTML：

<article class="TextAndImage">
   <a href="someLink">
      <figure class="col-xs-12 col-md-6 pull-left noPaddingLeft" style="background-image: url("image1.jpg");"><img width="960" class="img-responsive " src="blabla"></figure>
   </a>
   <div class="pullRight textDiv">
     <p>&nbsp;</p>
     <p>&nbsp;</p>
     <h2>SomeHeading</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. pharetra</p>
     <p class="pButton">
         <a class="btn btn-default" href="someLink" value="">Click Me</a>
     </p>
    </div>
</article>

CSS：

article.TextAndImage {
    display: table;
    height: 100%;    
}

figure {
    background-size: cover;
    background-position: center center;
    display: table-cell;
    height: 100%;
    min-height: 300px;
}

div.textDiv [
    display: table-cell;
    height: 100%;
}

在Chrome中，当textDiv元素中有更多文本时，图像始终会拉伸到最大高度。在其他浏览器中，它们会忽略百分比高度属性，并且图像不会拉伸。在Stack Overflow中搜索其他解决方案时，可以选择将正文和html高度设置为100％，但这也不起作用。

Answer 1

我尝试使用Edge和Chrome对您的代码进行测试。

在两个浏览器中我都得到了类似的结果。

以下是我使用Chrome浏览器的测试结果。

以下是我使用Edge的测试结果。

能否在不同的浏览器中向我们显示您的输出。这样我们就可以在您身边看到问题。

然后我们可以再次尝试为您提供解决问题的建议。

致谢

Deepak