身高不適合的內容在IE

Question

我有一些div應該看起來像這樣（在Chrome或IE11做）：

在IE10，然而，父容器似乎沒有大小本身的內容。它看起來非常難看：

我希望是出了故障父DIV的「顯示」 - 屬性，但我不能找出如何解決這個問題。

的HTML的有關部分：

.bigBlock { 
 
    border: solid 2px black; 
 
    border-bottom: 0px; 
 
    margin-top: 20px; 
 
    background: #ddd; 
 
    display: flex; 
 
} 
 
.bigBlockHeader { 
 
    width: 100%; 
 
    min-height: 30px; 
 
} 
 
.bigBlockTitle { 
 
    width: -moz-calc(100% - 310px); 
 
    width: -webkit-calc(100% - 310px); 
 
    width: calc(100% - 310px); 
 
    float: left; 
 
} 
 
.bigBlockTitle.cutOff { 
 
    margin-top: 5px; 
 
    margin-bottom: -5px; 
 
    font-weight: bold; 
 
    margin-left: 5px; 
 
} 
 
.bigBlockTitle.cutOff i { 
 
    margin-right: 5px; 
 
} 
 
.bbItemPause .cutOff { 
 
    text-align: center; 
 
} 
 
.bbRange { 
 
    width: 80px; 
 
    float: left; 
 
    overflow-x: hidden; 
 
    margin-left: 5px; 
 
    /*border-right: 1px solid black;*/ 
 
} 
 
.bbRange + .fa { 
 
    float: left; 
 
    margin-top: 3px; 
 
    margin-left: 5px; 
 
} 
 
.bigBlockBody { 
 
    margin-top: 0px; 
 
    border: solid 2px black; 
 
    border-top: 0px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.singleBlockElement { 
 
    width: 100%; 
 
    border-top: 1px solid lightgrey; 
 
    cursor: move; 
 
} 
 
.singleBlockElement:nth-of-type(odd) { 
 
    background-color: #f9f9f9; 
 
} 
 
.singleBlockElement i { 
 
    padding-top: 5px; 
 
} 
 
.singleBlockElement div { 
 
    height: 30px; 
 
    padding-top: 5px; 
 
} 
 
.singleBlockElement .cutOff { 
 
    width: calc(100% - 310px); 
 
    float: left; 
 
    margin-left: 5px; 
 
} 
 
.infoElement.infoplaceholder { 
 
    width: 100%; 
 
} 
 
.infoElement.infoplaceholder { 
 
    width: 100%; 
 
}

<div class="bigBlockContainer "> 
 
    <div class="bigBlock"> 
 
    <div class="bigBlockHeader noselect bbItemBlock"> 
 
     <div class="bbRange"> 
 
     <div class="bbRangeTime bbRangeFrom">08:00</div> 
 
     <div class="bbRangeTime bbRangeTo">18:00</div> 
 
     </div> 
 
     <div class="bigBlockTitle cutOff ng-binding"> 
 
     <i class="fa fa-minus-square-o"></i> 
 
     Mein Haus, mein Viertel, mein Block 
 
     </div> 
 

 
     <div class="edit"> 
 
     <a href="#">Block bearbeiten</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="bigBlockBody"> 
 

 
    <div class="singleBlockElement placeholder" draggable="false"> 
 
     <div class="bbRange">&nbsp;</div> 
 
     <i class="fa fa-info-circle infoicon"></i> 
 
     <div class="cutOff ng-binding"> 
 
     Fügen Sie neue Elemente hier mittels Drag&amp;drop ein 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bigBlockContainer "> 
 
    <div class="bigBlock"> 
 
    <div class="bigBlockHeader noselect bbItemBlock"> 
 
     <div class="bbRange"> 
 
     <div class="bbRangeTime bbRangeFrom">08:00</div> 
 
     <div class="bbRangeTime bbRangeTo">18:00</div> 
 
     </div> 
 
     <div class="bigBlockTitle cutOff ng-binding"> 
 
     <i class="fa fa-minus-square-o"></i> 
 
     Mein Haus, mein Viertel, mein Block 
 
     </div> 
 

 
     <div class="edit"> 
 
     <a href="#">Block bearbeiten</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="bigBlockBody"> 
 

 
    <div class="singleBlockElement placeholder" draggable="false"> 
 
     <div class="bbRange">&nbsp;</div> 
 
     <i class="fa fa-info-circle infoicon"></i> 
 
     <div class="cutOff ng-binding"> 
 
     Fügen Sie neue Elemente hier mittels Drag&amp;drop ein 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="bigBlockContainer "> 
 
    <div class="bigBlock"> 
 
    <div class="bigBlockHeader noselect bbItemBlock"> 
 
     <div class="bbRange"> 
 
     <div class="bbRangeTime bbRangeFrom">08:00</div> 
 
     <div class="bbRangeTime bbRangeTo">18:00</div> 
 
     </div> 
 
     <div class="bigBlockTitle cutOff ng-binding"> 
 
     <i class="fa fa-minus-square-o"></i> 
 
     Mein Haus, mein Viertel, mein Block 
 
     </div> 
 

 
     <div class="edit"> 
 
     <a href="#">Block bearbeiten</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <div class="bigBlockBody"> 
 

 
    <div class="singleBlockElement placeholder" draggable="false"> 
 
     <div class="bbRange">&nbsp;</div> 
 
     <i class="fa fa-info-circle infoicon"></i> 
 

 

 

 

 
     <div class="cutOff ng-binding"> 
 
     Fügen Sie neue Elemente hier mittels Drag&amp;drop ein 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</div>

我做了一個Plunkr： https://plnkr.co/edit/S6Zv0CvGujjTvCcz8fmJ

Answer 1

解決了這個： 我不得不清除浮動，也是最重要的：給孩子DIV的明確身高值：

.bigBlockHeader { 
    height:50px; 
} 

singleBlockElement { 
    clear:both; 
    height:50px; 
}