CSS 列（非网格）在 Chrome 中未按预期工作

Question

我被卡住了，似乎无法弄清楚。

我正在使用一个我称之为“text-col-”的类，后跟一个使用columns: [number]; CSS 的最多6 个数字。它的工作方式完全符合我在 Firefox 中的意图，但在 Chrome 中却没有。昨天我遇到了完全相反的问题，但我想我没有完全解决它（清楚地）。我将在此处编写特定代码（因此您不必查找它），还可以链接到实时版本，您可以在其中直观地看到我的问题（即在 Chrome 中）。

/* SCSS
@for $i from 1 through 6 {
  .text-col-#{$i} {
    width: 100%;
    columns: $i;
    
    @include clearfix;
    @include mq(tablet) {
      @if $i >= 5 {
        clear: both;
        columns: 2;
      }
    }
    @include mq(phone) {
      @if $i >= 3 {
        columns: 1;
      }
    }
  }
}
See the generated css below */

/* CSS */

.text-col-1 {
  width: 100%;
  -webkit-columns: 1;
  columns: 1; }
  .text-col-1::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }

.text-col-2 {
  width: 100%;
  -webkit-columns: 2;
  columns: 2; }
  .text-col-2::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }

.text-col-3 {
  width: 100%;
  -webkit-columns: 3;
  columns: 3; }
  .text-col-3::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (max-width: 480px) {
    .text-col-3 {
      -webkit-columns: 1;
      columns: 1; } }

.text-col-4 {
  width: 100%;
  -webkit-columns: 4;
  columns: 4; }
  .text-col-4::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (max-width: 480px) {
    .text-col-4 {
      -webkit-columns: 1;
      columns: 1; } }

.text-col-5 {
  width: 100%;
  -webkit-columns: 5;
  columns: 5; }
  .text-col-5::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .text-col-5 {
      clear: both;
      -webkit-columns: 2;
      columns: 2; } }
  @media only screen and (max-width: 480px) {
    .text-col-5 {
      -webkit-columns: 1;
      columns: 1; } }

.text-col-6 {
  width: 100%;
  -webkit-columns: 6;
  columns: 6; }
  .text-col-6::after {
    display: block;
    clear: both;
    line-height: 0;
    height: 0;
    content: " "; }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .text-col-6 {
      clear: both;
      -webkit-columns: 2;
      columns: 2; } }
  @media only screen and (max-width: 480px) {
    .text-col-6 {
      -webkit-columns: 1;
      columns: 1; } }
      
 /* CSS to center the text */
 
 [class*="text-col-"] {
  text-align: center;
 }

<!-- Written in pug-html (Jade), but here's the generated HTML -->

<div class="container">
  <p class="text-col-1">Text Columns</p>
  <p class="text-col-1">.text-col-1</p>
  <p class="text-col-2">.text-col-2<br/>.text-col-2</p>
  <p class="text-col-3">.text-col-3<br/>.text-col-3<br/>.text-col-3</p>
  <p class="text-col-4">.text-col-4<br/>.text-col-4<br/>.text-col-4<br/>.text-col-4</p>
  <p class="text-col-5">.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5</p>
  <p class="text-col-6">.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6</p>
  <!-- Wrapped-->
</div>
<div class="container">
  <div class="text-col-1">Text Columns</div>
  <div class="text-col-1">.text-col-1</div>
  <div class="text-col-2">.text-col-2<br>.text-col-2</div>
  <div class="text-col-3">.text-col-3<br/>.text-col-3<br/>.text-col-3</div>
  <div class="text-col-4">.text-col-4<br/>.text-col-4<br/>.text-col-4<br/>.text-col-4</div>
  <div class="text-col-5">.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5<br/>.text-col-5</div>
  <div class="text-col-6">.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6<br/>.text-col-6</div>
</div>

这里是一个“实时”版本的链接：https://fexell.github.io/Lib/test/classes.html#text-cols

那么，为什么这在 Chrome 中不起作用？

问题图片： Firefox shows this Chrome shows this

Answer 1

它似乎与中断以及<br> 如何在列中被解释有关。 watch this