解决 Chrome 中'container-type: inline-size”意外更改带来的问题

Chrome 129 引入了容器查询行为的变化，影响具有容器类型：内联大小的元素。此更改虽然很小，但有可能破坏您的网络应用程序的布局。我将回顾一下更改的内容、之前的行为方式以及从 Chrome 129 开始的行为方式。

发生了什么变化？

在 Chrome 129 之前，容器类型：隐式内联大小：

1. 为绝对定位的元素创建了一个包含块
2. 建立了新的堆叠上下文

为了说明这一点，请考虑以下内容：

  
    <style>
      .container {
        container-type: inline-size;
        width: 300px;
        height: 300px;
        border: 2px solid black;
        padding: 1rem;
        margin: 2rem;
        contain: layout;
      }

      .child,
      .sibling {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
      }

      .child {
        width: 200px;
        height: 200px;
      }

      .child-1 {
        background-color: rgba(255, 0, 0, 0.7);
        top: 100px;
        left: 100px;
        z-index: 2;
      }

      .child-2 {
        background-color: rgba(0, 255, 0, 0.7);
        top: 30px;
        left: 0;
        z-index: 1;
      }

      .sibling {
        width: 150px;
        height: 150px;
        background-color: rgba(0, 0, 255, 0.7);
        top: 165px;
        left: 50px;
        z-index: 1;
      }
    </style>
  
  
    <div class="container">
      <div class="child child-1">Child 1 (z-index: 2)</div>
      <div class="child child-2">Child 2 (z-index: 1)</div>
    </div>
    <div class="sibling">Sibling (z-index: 1)</div>
  

Chrome 129之前，上述代码渲染如下：

黑色轮廓的 .container div 的子级是绝对定位的。 child-2（绿色 div）位于 left: 0，但它与父 .container div 的左侧边界对齐。这是因为在 Chrome 128 及更早版本中，container-type: inline-size 隐式为绝对定位的子元素创建了一个包含块。

此外，container-type: inline-size 元素隐式创建一个新的堆叠上下文，导致绿色位于底部，红色位于中间，蓝色位于顶部。

但是，从 Chrome 129 开始，相同的 HTML 和 CSS 呈现方式如下，

不会为 .container 元素的子元素创建包含块，因此绝对定位的元素是相对于网页而不是相对于其容器定位的。这会导致绿色方块完全脱离容器并接触网页的左侧。

此外，由于没有创建新的堆栈上下文，因此子级和兄弟级堆栈的顺序已更改。绿色方块仍然位于底部，但现在蓝色方块位于中间，红色方块位于顶部。

为什么要改变？

根据 Chromium 团队在官方 Chromium 错误跟踪器上的说法，这是一项有意的更改，旨在修复团队认为原始规范中的设计错误。

规范本身尚未更新，但由于工作组内达成一致，团队在对规范进行任何更改之前对浏览器行为进行了更改。

截至撰写本文时（2024 年 10 月 3 日），所有其他主要浏览器（Firefox、Safari）仍然遵循 Chrome 129 之前的行为。

缓解变化

如果您只是想将内容恢复到 Chrome 129 之前的状态（同时保持浏览器之间的一致性，直到 Firefox 和 Safari 更新以遵循 Chrome 的实现），您只需添加 contains:layout;到具有container-type: inline-size; 的元素。

如果你想添加包含块行为但不创建新的堆叠上下文，你也可以添加position:relative to the container-type: inline-size;元素，它将为子元素创建一个包含块，但不会创建新的堆叠上下文。然而，这将导致不同浏览器中的行为不同，直到其他浏览器更新以追随 Chrome 的领先地位。

自己尝试一下

下面是一个您可以使用的 CodePen，它演示了我上面所说的内容。如果您从 .container 样式中删除 contains: 布局，并且您使用的是 Chrome 129 或更高版本，则布局将像我上面提供的第二张图片中一样显示。但是，如果您在 Firefox 131（截至撰写本文时最新）中查看 CodePen，无论是否设置 contains: 布局，它都应该显示相同的内容。

我在 Chrome 129 的发行说明中找不到提及此更改的内容，并且正如已经提到的，此更改是在任何规范更改之前进行的，因此它确实让我们措手不及，并显着破坏了布局我们的网络应用程序之一。我希望这些信息可以帮助其他遇到同样问题的人。

以上是解决 Chrome 中'container-type: inline-size”意外更改带来的问题的详细内容。更多信息请关注PHP中文网其他相关文章！