关于 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">