对 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 属性覆盖为可见，请通过开发者工具检查应用于元素的 CSS。这可让您识别出将 overflow 属性替换成 visible 的 CSS 声明，并移除该属性或将其更新为 clip。

img {
    overflow: clip;
}

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

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