變更 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">