在縮小後在Firefox中裁剪掉CSS背景圖片

我在Firefox（Mac和PC）中遇到CSS背景圖像並將縮放級別設置爲低於100％時出現問題。在縮小後在Firefox中裁剪掉CSS背景圖片

背景圖像似乎是將像素從圖像的右側或底部切掉。

下面是一個bin的鏈接，以顯示我的意思：http://jsbin.com/ehORakU/1 - 如果你在Firefox中，然後縮小（90％或75％），你應該能夠看到問題。

如果不是，這裏是我所看到的：

100％縮放級別：

enter image description here

90％縮放級別：

enter image description here

正如你所看到的，即使圖像僅爲16x16，而容器div爲18x18，圖標的底部像素也會被裁剪掉。

我也在IE中看到過這種行爲，但無法可靠地複製它。

有關如何防止圖像的邊緣像素被剪裁縮小的任何想法？

在測試4（http://jsbin.com/ehORakU/4/edit ），我試圖使用'圖像渲染：-moz-crisp-edges;'屬性。雖然這確實能夠在90％的變焦範圍內解決邊緣問題，但它仍然可以在75％的變焦範圍內進行修剪。 – RussellUresti

這是一個已知的問題，從webdevver的角度來看是不可修復的。讓Mozilla開發者弄清楚，這樣的問題存在大量的錯誤。 –

FireFox有很多縮放問題。首先，它不能連續縮放字體（即從一個固定大小跳轉到另一個固定大小），並且體面的下拉式框架成爲跨瀏覽器的噩夢。它也會將邊界弄亂一個像素左右。我並不感到驚訝，它也影響了圖片縮放。 Mozilla中的一些人似乎討厭浮點數。 –

嘗試使用：

#icon { 
    background-size: 100%; /* or background-size: cover; */ 
    padding-bottom: 0.1em /* seems to be better too */ 
}

這就像火狐去除背景-size屬性放大/縮小......當

2014-01-14 16:43:41 enguerranws

嘗試在這裏：http://jsbin.com/ehORakU/2（100％）和在這裏：http://jsbin.com/ehORakU/3（封面）。縮小時，Firefox仍會切斷。 – RussellUresti

在我的電腦上使用background-size：100％的效果更好。無論如何，我認爲你需要一個破解... – enguerranws

回答