IE11中帶有邊距和寬度中斷的Div

Question

我有以下標記：

 .content__wrapper { min-height: 325px; } .content__img { background-size: contain; background-position: left; background-repeat: no-repeat; } .tab__content { margin-left: 30%; width: 50%; margin: 0 auto; margin-top: 20px; z-index: 2; } blockquote { color: red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="content__wrapper d-flex flex-row justify-content-center"> <div class="content__img" style="background-image:url(https://placeimg.com/360/360/any);"> <div class="tab__content "> <div class="content__content"> <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote> </div> </div> </div> </div> 

在Chrome，Firefox等中，div正在加載文件，如下所示：

但是，在IE11中，圖像顯示的很小，並且.tab__content上的寬度被忽略（看起來是100％的寬度，這使它可以創建水平滾動條）。

任何想法為什么會出現這種現象？

Answer 1

您可以將最小高度content__wrapper更改為content__img。

的CSS

.content__img {
  min-height: 325px;
}

Answer 2

如果未設置height則Internet Explorer會忽略min-height 。

而且這種行為： caniuse

在Internet Explorer 10和11中，列方向flex容器上的min-height聲明不適用於該容器的flex項目。

可能有一個小技巧：

.content__wrapper {
  height: 1px;
  min-height: 325px;
}

 .content__wrapper { height: 1px; min-height: 325px; } .content__img { background-size: contain; background-position: left; background-repeat: no-repeat; } .tab__content { margin-left: 30%; width: 50%; margin: 0 auto; margin-top: 20px; z-index: 2; } blockquote { color: red; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="content__wrapper d-flex flex-row justify-content-center"> <div class="content__img" style="background-image:url(https://placeimg.com/360/360/any);"> <div class="tab__content "> <div class="content__content"> <blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote> </div> </div> </div> </div>