關於 CSS 行為變更可能會導致不必要的溢位現象的進階警告。
在 Chrome 108 版中,下列取代元素會遵循溢位屬性: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;
}
解決方法
如果這項變更顯示不必要的溢位,且並非刻意覆寫溢位屬性,請透過開發人員工具檢查套用至元素的 CSS。這應該可讓您找出將溢位屬性覆寫為 visible
的 CSS 宣告,然後將其移除或更新為 clip
。
img {
overflow: clip;
}
如果更新 CSS 並不容易,另一個修正方法是將下列內嵌樣式新增至元素。
<img style="overflow:clip !important">