在IE中为Flexbox的子项添加空间 [英] Space added to child of a flexbox in IE

问题描述

在IE11中运行时，下面的例子会在 itemwrapper 元素的底部添加空格。在开发控制台中进行检查时，此空间不会被归为边距，填充或边框。测量子元素的高度似乎是一个问题，因为如果给定一个固定的高度，那么空间消失（点击固定高度元素）。基于自动调整大小的子元素数量的错误复合...越多，空间越大（点击添加元素）

在Chrome，Firefox或Edge中都不会发生这种情况......它仅限于IE11（也就是我认为的IE10）。

这是一个记录错误吗？是否有解决方法？

window.addelements = function（）{$（'< div class =itemstyle =height： （< div>>< div>帐户名称< / div>< div>< input>< / div>< / div> removeelements = function（）{$（'。item'）。last（）。detach（）;} window.autoelements = function（）{$（'。item'）.css（'height'，'auto'）; } window.fixedelements = function（）{$（'。item'）。css（'height'，'50px'）;}

  #flexwrapper {display：flex; flex-direction：column; flex：1 1 100px; justify-content：flex-start; {border：4px blue solid;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js><< ; / script>< button onclick =addelements（）>添加元素< / button><按钮onclick =removeelements（）>删除元素< / button>< button onclick =autoelements（） >自动调整高度元素< / button><按钮onclick =fixedelements（）>固定高度元素< /按钮>< div id =flexwrapper> < div id =itemwrapper> < div class =itemstyle =height：auto;>< div>帐户名称< / div>< div>< input>< / div>< / div> < / div>< / div>  

解决方案

花了我几个小时（从这个问题），但解决的办法是设置 overflow：hidden 或 overflow：auto 在flexed元素的直接子元素上。 b

这是一个丑陋的黑客（因为你可能有绝对定位的元素，应该在容器外渲染），但对于我的情况，它似乎工作正常。我无法找到另一个解决方案，所以我很乐意看到另一个答案。

以下是内置解决方案的示例：

appendTo（$（'＃itemwrapper'））;}

< div> window.removeelements = function（）{$（'。item'）。last（）。detach（）;} window.autoelements = function（）{$（'。item'）.css（'height'，' ）;} window.fixedelements = function（）{$（'。item'）.css（'height'，'50px'）;} window.nooverflow = function（）{$（'＃itemwrapper'）.css（' （'overflow'，'hidden'）;} window.overflow = function（）{$（'＃itemwrapper'）。css（'overflow'，'inherit'）;}

  #flexwrapper {display：flex; flex-direction：column; flex：1 1 100px; justify-content：flex-start; {border：4px blue solid;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js><< ; / script>< button onclick =addelements（）>添加元素< / button><按钮onclick =removeelements（）>删除元素< / button>< button onclick =autoelements（） >自动调整高度元素< / button><按钮onclick =fixedelements（）>固定高度元素< /按钮><按钮onclick =nooverflow（）>溢出隐藏< /按钮><按钮onclick =overflow（）>溢出可见< / button>< div id =flexwrapper> < div id =itemwrapper> < div class =itemstyle =height：auto;>< div>帐户名称< / div>< div>< input>< / div>< / div> < / div>< / div>  

When run in IE11, the following example will add space to the bottom of the itemwrapper element. When examined in the dev console, this space isn't attributed to margin, padding or border. It seems to be an issue with measuring the height of the child elements, because if they are given a fixed height then the space disappears (click "fixed height elements"). The error compounds based on the number of auto-sized child elements... the more there are, the greater the space grows (click "add elements")

This doesn't happen in Chrome, Firefox or Edge... it's limited to IE11 (and, I think, IE10).

Is this a documented bug? Is there a workaround?

window.addelements = function(){
	$('<div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>').appendTo($('#itemwrapper'));
}
window.removeelements = function(){
	$('.item').last().detach();
}
window.autoelements = function(){
	$('.item').css('height', 'auto');
}
window.fixedelements = function(){
	$('.item').css('height', '50px');
}

#flexwrapper {
  display: flex;
  flex-direction: column;
  flex:1 1 100px;
  justify-content:
  flex-start;
  border: 4px red solid;
}

#itemwrapper {
  border: 4px green dashed;
}

.item {
  border: 4px blue solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addelements()">add elements</button>
<button onclick="removeelements()">remove elements</button>
<button onclick="autoelements()">auto height elements</button>
<button onclick="fixedelements()">fixed height elements</button>


<div id="flexwrapper">
    <div id="itemwrapper">
      <div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>
    </div>
</div>

解决方案

Took me a couple hours (with some help from this question), but the solution was to set overflow: hidden or overflow: auto on the immediate child of the flexed element.

It's an ugly hack (because you might have absolutely positioned elements that should render outside the container), but for my scenario it appears to be working correctly. I couldn't find another solution, so I'd be happy to see another answer.

Here's the example with the solution built in:

window.addelements = function(){
	$('<div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>').appendTo($('#itemwrapper'));
}
window.removeelements = function(){
	$('.item').last().detach();
}
window.autoelements = function(){
	$('.item').css('height', 'auto');
}
window.fixedelements = function(){
	$('.item').css('height', '50px');
}
window.nooverflow = function(){
	$('#itemwrapper').css('overflow', 'hidden');
}
window.overflow = function(){
	$('#itemwrapper').css('overflow', 'inherit');
}

#flexwrapper {
  display: flex;
  flex-direction: column;
  flex:1 1 100px;
  justify-content:
  flex-start;
  border: 4px red solid;
}

#itemwrapper {
  border: 4px green dashed;
}

.item {
  border: 4px blue solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addelements()">add elements</button>
<button onclick="removeelements()">remove elements</button>
<button onclick="autoelements()">auto height elements</button>
<button onclick="fixedelements()">fixed height elements</button>
<button onclick="nooverflow()">overflow hidden</button>
<button onclick="overflow()">overflow visible</button>

<div id="flexwrapper">
    <div id="itemwrapper">
      <div class="item" style="height: auto;"><div>Account Name</div><div><input></div></div>
    </div>
</div>

这篇关于在IE中为Flexbox的子项添加空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！