问题描述
在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'));}