Chrome神祕地將SVG位置降低了2px

我試圖從SVG spritesheet中創建一堆圖像鏈接，但我遇到了Chrome和Safari以及Firefox之間的跨瀏覽器問題。我有這樣一串標籤：Chrome神祕地將SVG位置降低了2px

<a href="#" id="twitter-logo" class="socialIcon"></a> 
<a href="#" id="facebook-logo" class="socialIcon"></a>

然後在我的CSS我設置爲所有這些

.socialIcons{ 
    background-image: url('../img/social.svg'); 
    width: 60px; 
    height: 60px; 
    display: inline-block; 
} 
#twitter-logo{background-position: 0px 0px;} 
#twitter-logo:hover{background-position: 0px -200px;} 
#facebook-logo{background-position: -79px 0px} 
#facebook-logo:hover{background-position: -79px -200px;}

的背景圖像，這適用於Firefox和Safari的罰款，但在Chrome看起來SVG文件比其他文件高2個像素。這意味着我的圖標的頂部是在我的<a>的頂部以下2個像素，並且我的圖標從邊緣切掉了2px。爲了解決這個問題，我可以從每個背景位置的y值中減去2，但之後我遇到了問題，因爲他們現在在Safari和Firefox中都出錯了。

這個神祕的轉變從何而來？

來源

2013-10-14 pandringa

你的SVG是什麼樣的？你可以做一個樣品小提琴，所以我們可以看到？ –

我現在發現了一個解決方案，Chrome和IE具有相同的y位置，而firefox和safari具有相同的位置。

Firefox不能讀取IE和Chrome可以使用的「background-position-y」。所以修正它是這樣的：

background-position：-177px -70px; // firefox fix on y-position

background-position-y：-72px;

IE和Chrome會讀取最後一行並覆蓋第一行的y值，但我還沒有發現任何其他修復。

乾杯

愛德華

來源

2014-05-14 13:02:03 Eduardo

我有同樣的問題上來了。在我們的SVG中，高度設置爲165.745px。一旦我將這些值更新爲166px，所有瀏覽器中的所有內容都看起來正確。

因此，它似乎源自於瀏覽器如何繞成整數的差異。這與嘗試在響應式佈局中將大量基於百分比的元素彼此浮動的問題是一致的...... Chrome/IE傾向於添加一個像素或2個像素，有時FF不會。

來源

2016-05-06 18:20:22

Chrome神祕地將SVG位置降低了2px

回答

相關問題