我有一个2像素高的图像。在DPI为125％的屏幕上以及在Firefox中，高度的显示取决于图像的位置。
这是重现该问题的最低代码：
HTML：
<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='2'><rect width='1000' height='2' style='fill:gray'/></svg>
CSS：
svg{
position:relative;
top:11px;
}
这是一个测试它的codepen： https://codepen.io/ilyesfer/pen/GRgRxeV
更改“顶部”位置时，在某些位置渲染的图像高度将更改。
要重现该问题，必须在Firefox上以125％的DPI比例对其进行测试。只需在“顶部”位置添加1px的时间，您会发现有时渲染的图像高度会发生变化。
即使图像是通过url嵌入的，如果水平移动图像的宽度，也会出现问题。
问题不依赖于CSS定位，如果图像由于其他原因（例如在推入图像之前在其他元素中改变位置）或在Codepen中调整预览区域的大小而发生更改，则会发生相同的问题...
我的问题是：为什么会发生这种情况，我该怎么做（网页方面）以防止这种行为发生？
编辑：事实证明，这并非特定于图像，它也发生在div和几乎所有元素上。相应地更改了标题。