html - Chrome 中带有子 DIV 元素的 CSS3 列

Question

我在使用 CSS3 列时遇到了问题，它们在 Chrome 53.0.2785 中无法按我预期的方式工作 - 它们在 Firefox 49、IE11、EDGE 38.14393 中按我预期的方式工作

我的“容器”DIV 的前两个子 DIV 在 Chrome 中显示在彼此下方，但在 Firefox 中显示在彼此旁边

HTML:

<div class="container">
  <div>
    Some content 1
  </div>
  <div>
    Some content 2
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}
.container {
  column-width: 100px;
  column-gap: 12px;
}
.container > div {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  padding: 20px;
}

在这里测试一下:https://jsfiddle.net/s7cfbqzt/3/

现在，Chrome 中发生了一些奇怪的事情:

• 如果我只删除“display: inline-block”，Chrome 会分解 DIV(甚至边框也会被分散) - Firefox 则不会

  • 请注意，我无法在父级中设置列数(与删除内联 block 相结合似乎有点工作)，因为它应该是一个流体布局。每个 DIV 的高度也是动态的，所以如果这是一个要求，我必须为此编写一些 JS(但我更希望在没有 JS 的情况下使其工作)。

• 如果我删除边框大小和子 DIV 的所有属性，它会按预期工作，但是一旦我开始用一些其他内容填充内部 DIV(可能有边框、填充或框阴影) ，又断了

如果我添加第三个子 DIV

<div>Some content 3</div>

Chrome 中会有列，但显示为

1..3
2

第四个 DIV 将显示在 DIV3 下方，第五个 DIV 再次显示在第一“行”中。

1..3..5
2..4

这是 Chrome 中的错误还是我做错了什么？

Answer 1

Chrome 实际上可能是唯一正确执行此操作的浏览器:

https://drafts.csswg.org/css-break/#widows-orphans

Name:   orphans, widows
Value:  <integer>
Initial:    2

IE 11、EDGE 和 Firefox (49)(还没有？)支持寡妇和孤儿，尽管http://caniuse.com/#feat=css-widows-orphans声称 IE11 和 EDGE 确实支持它 - 请参阅 https://jsfiddle.net/s7cfbqzt/13/在 IE11 和 EDGE 中。如果 IE 和 EDGE 实际上支持它，他们会将初始值设置为 1 而不是 2。

针对我的用例的修复是添加

orphans: 1;
widows: 1;

CSS 中的容器类。

感谢@Jay 花时间调查此问题!