“闯入:避免列"在 Firefox 中不起作用

问题描述

我正在页脚中创建列.它适用于 Chrome 和 IE，使用:

列数:4；闯入:避免列；

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

我能做什么?

使用 page-break-inside: avoid，我得到类似 修正错误的规则.也许，它可能对某人有用

I'm creating columns in my footer. It works well for Chrome and IE using:

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

I'm getting troubles with Firefox, where the property is crossed out:

What can I do?

Using page-break-inside: avoid, I get something like this.Some items move over his position, like "Item 9".

How it looks in Chrome:

For example:

#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>

解决方案

I tried bugfix with page-break-inside: avoid, but for me it didn't work fine with only this property and value on Firefox.

Then I used the following solution and, in my case, work well for Firefox, Chrome and 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;
  }
}

As you can see, I used @supports rule to bugfix. Maybe, it could be useful to someone

这篇关于“闯入:避免列"在 Firefox 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！