變更 CSS 中已取代元素溢位的情形

關於 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">