瀏覽器還不支持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很糟糕，對吧？ 它不支持標准，除非它們與現實世界完全無關，例如用於打印業務報告的基本分頁控制。 誰想這樣做？