对 CSS 中被替换元素溢出的更改

关于 CSS 行为变更可能会导致意外溢出的高级警告。

从 Chrome 108 开始，以下被替换的元素遵循 overflow 属性：img、video 和 canvas。在早期版本的 Chrome 中，系统会忽略这些元素上的此属性。

这意味着，之前裁剪到其内容框的图片现在可以超出这些边界（如果在样式表中已指定这样做的话）。默认浏览器样式表按照以下规则将溢出截断到内容框中：

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

不过，通过设置 overflow: visible，您的样式表可以替换此行为。以下示例展示了您现在可能会看到不必要的溢出的一些情况。

object-fit 属性用于缩放图片以及填充方框。如果宽高比与方框不匹配，图片将绘制到边界之外。

img {
  object-fit: cover;
  overflow: visible;
}

border-radius 属性使方形图片看起来像圆形，但由于 overflow 可见，因此不会再进行裁剪。

img {
  border-radius: 50% 50%;
  overflow: visible;
}

设置 inherit: all 并使所有属性都继承，包括 overflow。

img {
  all: inherit;
}

解决方案

如果此更改意味着您看到了不必要的溢出，并且将 overflow 属性替换为 visible 并非有意为之，请通过开发者工具检查应用于元素的 CSS。这应该可让您识别将 overflow 属性替换成 visible 的 CSS 声明，并将其移除或更新为 clip。

img {
    overflow: clip;
}

如果更新 CSS 并非易事，另一种解决方法是将以下内嵌样式添加到元素中。

<img style="overflow:clip !important">