Question

我目前正在处理一个页面，该页面在一个表单页面上使用了一组也实现了CSS3列的字段集。

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

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

我认为这不是Chome特有的错误，我认为它还没有说明它应该如何完成，或者其他什么。

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

我制作了一个情节模型。见jsFiddle。（显然看起来与我上面描述的项目略有不同，但同样的错误。）

Answer 1

看起来webkit已实施column-break-inside，您可以将其添加到fieldset规则，以阻止它跨列拆分

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

Answer 2

对于那些碰到这个论坛并且需要Firefox解决方案的人来说，只是一般的FYI。

目前，即使使用column-break-inside前缀，Firefox 22.0也不支持-moz-属性。

但解决方案很简单：只需使用display:table;即可。您也可以** display:inline-block;这些解决方案的问题是列表项将丢失其列表样式项或项目符号图标。

**此外，我在display:inline-block;遇到的一个问题是，如果两个连续列表项中的文本非常短，则底部项目将自行换行并与其上方的文本内联。

display:table;是两种解决方案中最差的。

Answer 3

您应该使用break-inside: avoid;

完整语法：

li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}