如何强制我的CSS3列仅在换行时断开？

Question

我目前正在开发一个页面,该页面在一个表单页面上使用了一堆字段集,这些字段集也实现了CSS3列.

问题是列以这样的方式换行,有时在打破下一列时会留下半个字段集.

在我正在进行的项目中,我正盯着Chrome 15中的一个字段集图例,它与一列底部字母的上半部分和顶部字母的下半部分拼接成一半.下一栏.在Firefox 7中,我没有看到这个问题(可能它们已经在换行符或块元素之后断开).

我不认为这是一个Chome特定的bug,我认为它还没有说明它应该如何完成,或者其他什么.

无论如何,我想明确告诉所有支持列的浏览器在这些字段集之间中断.谢谢.

我做了一个情节模型.看到这个jsFiddle.(显然看起来与我上面描述的项目略有不同,但同样的错误.)

Answer 1

看起来已经实现了webkit column-break-inside,您可以将其添加到fieldset规则中以阻止它跨列拆分它们

fieldset {
    border: 1px solid #ddd;
    padding: 1.0em;
    -webkit-column-break-inside: avoid;
}