Firefox中break-before: avoid-column属性失效问题求助

问题根源 #

1. HTML结构不合法：<ul>的直接子元素只能是<li>，你直接把<h2>放在<ul>里，浏览器会自动修正这个错误，但Chrome/Edge和Firefox的修正逻辑不同，导致Firefox无法正确识别分组结构，进而让break-before: avoid-column失效。
2. 属性应用对象错误：你把断列属性加在了单个<li>上，而不是整个字母分组的容器上，这在Firefox中无法起到阻止分组跨列的作用。

解决步骤 #

1. 修正HTML结构 #

把每个字母分组放在独立的容器中，确保结构符合HTML规范。以下两种方式都可以：

方式一：用<div>作为外层容器

<div class="index-list">
  <div class="letter-group">
    <h2>A</h2>
    <ul>
      <li>Anteater</li>
      <li>Apple</li>
      <li>Asteroid</li>
    </ul>
  </div>
  <div class="letter-group">
    <h2>B</h2>
    <ul>
      <li>Bouncy Ball</li>
      <li>Bumblebee</li>
      <li>and so on...</li>
    </ul>
  </div>
</div>

方式二：保持<ul>外层，分组放在<li>内

<ul class="index-list">
  <li class="letter-group">
    <h2>A</h2>
    <ul>
      <li>Anteater</li>
      <li>Apple</li>
      <li>Asteroid</li>
    </ul>
  </li>
  <li class="letter-group">
    <h2>B</h2>
    <ul>
      <li>Bouncy Ball</li>
      <li>Bumblebee</li>
      <li>and so on...</li>
    </ul>
  </li>
</ul>

2. 调整CSS样式 #

将断列属性应用在整个分组容器上，同时补充Firefox兼容的属性：

.index-list {
  column-width: 150px;
}

.letter-group {
  /* 核心属性，阻止分组前断列 */
  break-before: avoid-column;
  /* 补充Firefox兼容，防止分组内部被拆分 */
  break-inside: avoid;
  /* 旧版Firefox可能需要的兼容属性 */
  page-break-before: avoid;
  page-break-inside: avoid;
}

/* 可选：去掉内部列表的默认缩进和样式 */
.index-list ul {
  list-style: none;
  padding-left: 0;
}

效果说明 #

修正后，每个字母分组（包括标题和下方所有条目）会完整显示在同一列中，不会跨列拆分，同时兼容Chrome/Edge和Firefox 121.0.1版本。

内容的提问来源于stack exchange，提问作者hellie