html - "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 上仅使用此属性和值时效果不佳。

然后我使用了以下解决方案，就我而言，它适用于 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修正错误的规则。也许，它可能对某人有用