时间戳

首页 > 解决方案 > “break-inside：避免列”在 Firefox 中不起作用

html - “break-inside：避免列”在 Firefox 中不起作用

问题描述

我在页脚中创建列。它适用于 Chrome 和 IE，使用：

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

我在使用 Firefox 时遇到问题，该属性被划掉：

划掉

我能做些什么？

使用page-break-inside: avoid，我得到这样的东西。有些物品会移过他的位置，例如“第 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>

标签： htmlcssfirefoxcss-multicolumn-layout

解决方案

我尝试使用 进行错误修复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规则来修复错误。也许，它可能对某人有用

推荐阅读