IE10 flexbox的宽度包括填充,导致溢出。框大小调整:边框不固定 [英] IE10 flexbox widths include padding, causing overflow. box-sizing: border-box doesn't fix
本文介绍了IE10 flexbox的宽度包括填充,导致溢出。框大小调整:边框不固定的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
此示例中的LHS flex子级具有1em填充,这将导致RHS溢出父级:
The LHS flex child in this example has 1em padding, and it will cause RHS to overflow the parent:
<div style="display: -ms-flexbox; box-sizing: border-box; width: 200px; border: 5px solid black">
<div style="padding: 1em; -ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 33%; background-color: blue; box-sizing: border-box">
LHS
</div>
<div style="-ms-flex-positive: 0; -ms-flex-negative: 0; -ms-flex-preferred-size: 67%; background-color: red; box-sizing: border-box">
RHS
</div>
</div>
这是小提琴:
当flex儿童填充时,如何消除溢出? 框大小:边框框
不起作用。
How can I eliminate the overflow when flex children have padding? box-sizing: border-box
doesn't work.
推荐答案
我在 flexbox
和 box-sizing:border-box;
中遇到了类似的问题。后者似乎在IE中不起作用。宽度在这种情况下不起作用,因为填充会改变宽度-但是,如果您可以使用最大宽度
,那应该可以解决此问题。
I had similar problems with flexbox
and box-sizing: border-box;
. The latter one just doesn't seem to work in IE. Width wouldn't work in this case since padding will change it - but if you can use max-width
, that should fix the problem.
这篇关于IE10 flexbox的宽度包括填充,导致溢出。框大小调整:边框不固定的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文