浏览器还不支持column-break-after吗？

Question

我有这样的html标记：

<ul>
  <li>
    <h2>heading</h2>
    <img src="path.jpg" />
    <p>paragraph here</p>
  </li>
  <li>
    <h2>heading</h2>
    <img src="path.jpg" />
    <p>paragraph here</p>
  </li>
....
</ul>

我为此使用了多列布局：

ul{
column-count: 3;
}

但这是从任何地方断开的列，但我要避免从任何地方断开。 它应该只从li标签打破

所以，我试图break-after https://developer.mozilla.org/en-US/docs/Web/CSS/break-after这似乎不支持。 我正在使用Firefox 27.1。

---

我也尝试过使用前缀。

Answer 1

您应该访问caniuse.com-一个非常有用的地方，以查看浏览器对各种HTML5 / CSS3功能的支持。

在那里快速搜索显示了CSS3多列布局的支持- http://caniuse.com/#search=column%20layout -它看起来像Firefox有部分支持 ，但你需要使用-moz前缀。

Answer 2

令人惊讶的是，我将display: inline-block放到li处，那么它在任何地方都不会中断，而只是在li之后而中断，但是我不知道为什么这种情况会发生。 无需使用突破。

Answer 3

Internet Explorer 10+和Opera都已支持page-break-after和它的替换break-after （包括page-break-after和column-break-after的功能）。 只有Chrome和Firefox在分页支持上被彻底打破。 甚至Webkit都支持该概念，自然会使用其自己的特殊闪烁白色语法。

据我所知，作为其自身属性， column-break-after仅作为-webkit-column-break-after ，它从未成为任何CSS标准的一部分。

但是，嘿，Internet Explorer很糟糕，对吧？ 它不支持标准，除非它们与现实世界完全无关，例如用于打印业务报告的基本分页控制。 谁想这样做？