在IE中添加到flexbox的子节点的空间
发布时间:2020-12-15 01:46:21 所属栏目:百科 来源:网络整理
导读:在IE11中运行时,以下示例将在itemwrapper元素的底部添加空格.在开发控制台中检查时,此空间不会归因于边距,填充或边框.测量子元素的高度似乎是一个问题,因为如果它们被赋予固定的高度,那么空间就会消失(单击“固定高度元素”).错误的化合物基于自动调整大小的
在IE11中运行时,以下示例将在itemwrapper元素的底部添加空格.在开发控制台中检查时,此空间不会归因于边距,填充或边框.测量子元素的高度似乎是一个问题,因为如果它们被赋予固定的高度,那么空间就会消失(单击“固定高度元素”).错误的化合物基于自动调整大小的子元素的数量…越多,空间越大(单击“添加元素”)
这在Chrome,Firefox或Edge中不会发生……它仅限于IE11(我认为是IE10). 这是一个有记录的错误吗?有解决方法吗? 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> 解决方法
花了我几个小时(从
this question获得一些帮助),但解决方法是在flexed元素的直接子节点上设置overflow:hidden或overflow:auto.
这是一个丑陋的黑客(因为你可能有绝对定位的元素应该在容器外部渲染),但对于我的场景它似乎工作正常.我找不到另一个解决方案,所以我很乐意看到另一个答案. 以下是内置解决方案的示例: 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','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> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |