«Взлом внутри: избежать столбца» не работает в Firefox

Question

Я новичок в этом и создаю столбцы в своем нижнем колонтитуле.

Я понял, что это хорошо работает для Chrome и IE, используя:

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

У меня проблемыс Firefox, где я получаю свойство вычеркнуто

Что я могу сделать?Можете ли вы помочь?Заранее спасибо.

Редактировать: Используя page-break-inside: avoid я получаю что-то вроде this .Некоторые элементы перемещаются по его позиции, например, «Элемент 9».

В Google Chorme

Например: Html:

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

CSS:

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

Answer 1

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

Answer 2

Я пытался исправить ошибку с 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;
  }
}

Как видите, я использовал @ поддерживает правило для исправления ошибок.Может быть, кому-то это может пригодиться

Answer 3

попробуйте это, я думаю, что его работа

page-break-inside: avoid;