Zen*_*non 27
好吧,你需要介于两者之间来"打破"崩溃.
我的第一个想法是使用中间display:none设置的div ,但这似乎不起作用.
所以我试过了:
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
这似乎做得很好(至少在Firefox中,没有安装Internet Explorer来测试它...)
<html>
<body>
<div style="margin: 100px;">.</div>
<div style="overflow: hidden; height: 0px; width: 0px;">.</div>
<div style="margin: 100px;">.</div>
</body>
</html>
and*_*par 16
从IE8你可以做到:
<div class="uncollapse-margins">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div class="uncollapse-margins">
<p>Lorem ipsum dolor sit amet.</p>
</div>
使用CSS:
.uncollapse-margins:before,
.uncollapse-margins:after
{
content: "\00a0"; /* No-break space character */
display: block;
overflow: hidden;
height: 0;
}
使用Flex或Grid布局.
在flex和grid容器中,没有边缘折叠这样的东西.
规格中的更多细节:
3. Flex Containers:
flex和inline-flexdisplay值Flex容器为其内容建立新的flex格式上下文.这与建立块格式化上下文相同,除了使用flex布局而不是块布局.例如,浮动不会侵入Flex容器,并且Flex容器的边距不会随其内容的边距而折叠.
5.1.建立网格容器: 显示值
grid和inline-grid显示值网格容器为其内容建立新的网格格式化上下文.这与建立块格式化上下文相同,除了使用网格布局而不是块布局:浮点数不会侵入网格容器,并且网格容器的边距不会随其内容的边距而崩溃.
Eric Meyer在他的文章Uncollapsing margin中提到了你的确切观点.
有关他的方法,请参见图6之后的文章.他提到1px填充/边框通常是要走的路,但是对于添加额外像素没有灵活性的情况提供了一个非常简单的解决方案.
它涉及手动覆盖每个元素的边距,所以我不确定它是否适用于您的特定情况.
一个巧妙的技巧是禁用没有视觉冲击的边缘折叠,据我所知,将父级的填充设置为0.05px:
.parentClass {
padding: 0.05px;
}
填充不再为0,因此不再发生折叠,但同时填充足够小,在视觉上它将向下舍入到0.
如果需要一些其他填充,则仅将填充应用于例如不需要边缘折叠的"方向" padding-top: 0.05px;.
工作范例:
.noCollapse {
padding: 0.05px;
}
.parent {
background-color: red;
width: 150px;
}
.children {
margin-top: 50px;
background-color: lime;
width: 100px;
height: 100px;
}<h3>Border collapsing</h3>
<div class="parent">
<div class="children">
</div>
</div>
<h3>No border collapsing</h3>
<div class="parent noCollapse">
<div class="children">
</div>
</div>编辑:将值更改0.1为0.05.从这个小测试中,似乎Firefox考虑了0.1px填充.虽然,0.05px似乎可以做到这一点.