我有一些看起来像这样的 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"> </div>
<i class="fa fa-info-circle infoicon"></i>
<div class="cutOff ng-binding">
Fügen Sie neue Elemente hier mittels Drag&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"> </div>
<i class="fa fa-info-circle infoicon"></i>
<div class="cutOff ng-binding">
Fügen Sie neue Elemente hier mittels Drag&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"> </div>
<i class="fa fa-info-circle infoicon"></i>
<div class="cutOff ng-binding">
Fügen Sie neue Elemente hier mittels Drag&drop ein
</div>
</div>
</div>
</div>
</div>
我做了一个 Plunkr: https://plnkr.co/edit/S6Zv0CvGujjTvCcz8fmJ
最佳答案
解决了这个问题: 我必须清除 float ,最重要的是:为子 DIV 提供明确的高度值:
.bigBlockHeader {
height:50px;
}
singleBlockElement {
clear:both;
height:50px;
}
关于html - 父容器的高度不适合 IE 中的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39979218/