我目前正在调试一个网站,使其可以在IE 11上运行。现在有一页,在flexbox容器中有两个div表。在容器下方,还有另一个flexbox'navLine',应将其直接放置在容器下方。在IE 11以外的所有浏览器中,此方法都可以正常工作。容器和navLine似乎重叠。奇怪的是,navLine会粘贴到容器内的按钮上。该按钮位于div表的单元格内,没有任何其他CSS属性。 有帮助吗?
这是简化的代码:
#NavLine
{
margin-bottom: 8px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
align-items: center;
}
.SelectionBox
{
background: #f7f7f7;
border: 1px solid #d9d9d9;
padding: 16px;
margin-bottom: 16px;
min-width: 570px;
min-height: 410px;
}
.Container
{
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-justify-content: space-around;
-ms-justify-content: space-around;
justify-content: space-around;
width: 100%;
flex: 1 1 auto;
}
#Box1, #Box2
{
flex: 1 1 auto;
padding: 16px;
}
.Table
{
display: table;
table-layout: fixed;
overflow: hidden;
height: 100%;
width: 75%;
}
.Title
{
display: table-header-group;
width: 100%;
height: 80px;
}
.Row
{
display: table-row;
}
.Cell
{
display: table-cell;
padding-left: 5px;
padding-right: 5px;
vertical-align: middle;
height: 70px;
}
<div class="Container">
<!-- First Box -->
<div id="Box1">
<div class="Table SelectionBox">
<div class="Title">
<h2>Box One</h2>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<span> ([[result]]) Results</span>
<span>Reset (this is a button)</span>
</div>
</div>
</div>
</div>
<!-- Second Box -->
<div id="Box2">
<div class="Table SelectionBox">
<div class="Title">
<h2>Box Two</h2>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell">
<span>Some Item</span>
</div>
<div class="Cell">
<span>Some Value</span>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<span> ([[result]]) Results</span>
<span>Reset (this is a button)</span>
</div>
</div>
</div>
</div>
</div>
<div id="NavLine">
<span>Back</span>
<span>Next</span>
</div>
答案 0 :(得分:1)
“ IE 11要求将一个单位添加到第三个参数flex-basis属性”-请参见“已知问题”标签https://caniuse.com/#feat=flexbox
此外,可能需要最小高度
因此,请尝试例如:
#container > div {
flex:1 1 8em;
min-height:8em;
}
答案 1 :(得分:1)
IE中的问题是height: 100%
中的.Table.SelectionBox
导致该元素溢出其容器(#Box1
)。然后,它与#NavLine
元素重叠,这不会引起任何问题。
解决此问题的一种方法是删除该高度规则。