"break-inside: avoid-column“在Firefox中不起作用

Question

我正在我的页脚中创建列。它在Chrome和IE上运行良好，使用：

column-count: 4;
break-inside: avoid-column;

我在Firefox上遇到了麻烦，它的属性被划掉了：

​

​

我能做什么?

使用page-break-inside: avoid，我得到了类似于this的东西。有些项目会移到他的位置上，比如“项目9”。

它在Chrome中的外观：

​

​

例如：

​

#columnasFooter{
  column-count: 3;
}
#columnasFooter li{
  break-inside: avoid-column;
  page-break-inside: avoid;
}

<ul id="columnasFooter">
    <li>Title column 1
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
        </ul>
    </li>
    <li>Title column 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </li>
    <li>Title column 3
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>
</ul>

​

Answer 1

我试着用page-break-inside: avoid修复错误，但对我来说，在火狐上只有这个属性和值就不能很好地工作。

然后我使用了以下解决方案，在我的例子中，在Firefox，Chrome和Edge上都能很好地工作：

#columnasFooter {
  column-count: 3;
}

#columnasFooter li {
  /* for Chrome and Edge */
  break-inside: avoid-column;
  /* for Firefox */
  display: inline-grid;
  page-break-inside: avoid;
}

/* for Chrome and Edge */
@supports (break-inside: avoid-column) {
  #columnasFooter li  {
    display: block;
  }
}

如你所见，我使用了@supports规则来修复错误。也许，它会对某些人有用

Answer 2

在火狐和overflow: hidden上都能正常工作，但在Chrome上就不行了。因此，我们应该使用@support查询来控制溢出。下面的代码在Chrome和Firefox中运行良好。

​

#columnasFooter {
  column-count: 3;
}

#columnasFooter li {
  break-inside: avoid-column;
  page-break-inside: avoid;
  overflow: hidden; /* fix for firefox */
}

@supports (break-inside: avoid-column) {
  #columnasFooter li {
    overflow: visible; /* for chrome */
  }
}

<ul id="columnasFooter">
  <li>Title column 1
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
    </ul>
  </li>
  <li>Title column 2
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
    </ul>
  </li>
  <li>Title column 3
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
    </ul>
  </li>
</ul>

​

Answer 3

Fire fox不支持break-inside查看此处：https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

SO

使用page-break-inside: firefox的：

column-count: 4;
break-inside: avoid-column;
page-break-inside:avoid;

有关page-break-inside:avoid;的信息，请查看此处：

https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-inside