css - 使用 CSS 清除修复和展开边距而没有副作用？

Question

什么是通用使用 CSS 清除和取消折叠边距而没有副作用(也没有额外的 HTML 元素)的好方法？

以下会导致副作用(并希望避免它们):

• 设置溢出:隐藏或溢出:自动:剪辑 box-shadow、CSS 转换和其他可能希望在框外显示的内容。因此，它不能在多种情况下使用(但在其他方面效果很好)。
• 设置border或padding:明显的定位/尺寸效果。

Answer 1

清除和折叠修复，基于 this clear fix , 加上边距 uncollapse:

.group:before, /* :before to uncollapse the top margin */
.group:after{
    display: block;
    clear: both; /* clear fix */
    content: "\a0 "; /*   - just a space doesn't uncollapse margins */
    visibility: hidden; /* make sure not to show anything */
    height: 0;
}
.group{
    zoom: 1; /* solves it all for IE < 8, and doesn't hurt other browsers */
}

演示:jsFiddle , IE7 render with netrenderer

请注意 content: "\a0 "; 等同于   并用于代替非空白字符(例如 .) 这样当您选择 block 并复制它时，您不会获得额外的可见字符，否则在某些浏览器(例如 IE9)中会发生这种情况。

此解决方案的缺点是:

• :before 和 :after 被定义，所以如果要使用它们需要特别小心。
• 对于每个要应用此修复的新选择器，您必须指定选择器 3 次。
• 不是很短/琐碎。

YUI, described in this article 使用了类似的解决方案(但没有  )。