Safari不尊重填充

Question

我目前正在一個頁面上有一系列svgs，動態地使用（坦率地說驚人的）d3.js創建。

一切都很好，除了我在Safari（版本9.1.1（10601.6.17）在Mac OS X（優勝美地，在El Capitan與最新的Safari 9.1可重複）中出現一個奇怪的問題），因爲事情沒有對齊。我有兩個緊靠在一起的svgs，它們的所有意圖和目的都具有相同的邊距，填充等定義，但其中一個座標正確（帶有14px的填充頂部），而另一個（理論上也與14px padding-top）似乎完全忽略了這個填充，並且座標高了14px。從下面的圖片中可以看出，我使用了Safari內置的開發工具，而且填充似乎已經被正確定義，只是決定不在意。

相比：

值得一提的是，這個問題對於許多這些SVG對的重複，因爲我有，所以它不只是一個實例發生（在這兩個圖像你可以看到同樣的現象反覆出現）。

另一個奇怪的/有趣的元素是，當我縮小（使用⌘+⇧+ - ）時，問題似乎自行解決。這隻發生在默認縮放級別。

任何幫助/指針非常感謝。我不會以任何有意義的方式將自己描述爲前端開發人員，我真的是因爲必要而這樣做，所以完全有可能我做的事情非常非常愚蠢。

這一切都在Chrome上完美運作。

Answer 1

在跟進了olivier的建議之後，我修復了一些非整數寬度/高度，但不幸的是這些寬度/高度不起作用，但是在做這件事時我正在查看填充並決定嘗試調整它。長話短說，Safari顯然是因爲試圖完美觸摸的svgs而合適的。在左邊的svg填充右邊爲0，在右邊的svg填充爲0就好像是問題所在。解決的辦法是將兩個填充都設置爲0.02px（似乎是沒有給出麻煩的最低限度）。這在兩個svgs之間留下了非常微妙的接縫，但顯然這是對它們進行錯位的巨大改進。