解决 Chrome 中'container-type: inline-size”意外更改带来的问题
- Patricia Arquette原创
- 2024-10-03 16:09:02560浏览
Chrome 129 引入了容器查询行为的变化，影响具有容器类型：内联大小的元素。此更改虽然很小，但有可能破坏您的网络应用程序的布局。我将回顾一下更改的内容、之前的行为方式以及从 Chrome 129 开始的行为方式。
发生了什么变化？
在 Chrome 129 之前，容器类型：隐式内联大小：
- 为绝对定位的元素创建了一个包含块
- 建立了新的堆叠上下文
为了说明这一点，请考虑以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<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>
</body>
</html>
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中文网其他相关文章！