0

我正在研究一个用于正确显示嵌套多列布局的旧代码库。大约一年前的某个时候，Firefox 浏览器停止正确布局嵌套列，而 Chrome 仍在工作。所以我决定检查一下。

它归结为“column-count” CSS 属性的使用。如果在嵌套超过两层的 HTML 元素上使用，它看起来当前的 Firefox 浏览器完全忽略了它。

任何人都注意到了类似的问题，这会让我们想知道为什么嵌套的实现会在二级停止？

这是一个代码笔：

https://codepen.io/Jorich/pen/rNjVPxK

div {
  column-rule: red solid 3px;

  margin: 3px;
  padding: 3px;
  border: 3px solid lightgray;

  -moz-page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
}
<div style="column-count: 2;">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div style="column-count: 2;">
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div>2</div>
    <div style="column-count: 2;">
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div style="column-count: 2;">
        <div>4</div>
        <div>4</div>
      </div>
    </div>
  </div>
</div>

Chrome 显示 4 级嵌套： Chrome 显示 4 级嵌套

Firefox 在嵌套级别 2 停止： Firefox 在嵌套级别 2 停止

将近一年后的今天，这种行为并没有改变，尽管我曾预计这只是一两个版本的 Firefox 浏览器中的临时故障。相反，它仍然存在，就像预期的功能一样。在此期间，我对其他有类似问题的人进行了深入的网络搜索，但没有发现任何可以让我重新走上解决之路的观察结果。

除了从根本上替换整个嵌套多列方法之外，您还会做什么？任何提示都将证明非常有用。

4

0 回答 0