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之间留下了非常微妙的接缝，但显然这是对它们进行错位的巨大改进。