html - Firefox 中的文本对齐裁剪图像吗？

Question

我有两个非常大的 PNG，它们被严重缩小并放在 div 中，水平和垂直居中。水平居中是通过页面 CSS 中的 text-align:center 实现的，在 Chrome 中，大部分情况下一切似乎都运行良好......

(Fiddle)

在 Firefox 中，有两张图片(不是全部)被稍微向右裁剪。打开开发人员工具箱并禁用 text-align: center(继承自并应用于页面的大部分)无缘无故地修复了图像。只需打开开发人员工具箱本身就可以正确显示左侧图像(但不是右侧图像)，但一旦工具箱关闭，它就会再次裁剪。

为什么会这样？这是有意的行为吗？错误？我搞砸了吗？

Answer 1

没有裁剪。如果您稍微调整 jsfiddle 窗口的大小，您会看到结果从完美的圆形变为切掉的圆形并返回。

(放大是为了更好的可见性；不幸的是，您无法通过放大浏览器获得相同的结果!)

所以，这只是舍入误差。
然而，如您所见，舍入误差仅发生在图片的最右侧，即右边缘或右边缘附近。

所以有一个简单的解决办法:把图片放大一点，让形状的边缘不再在图片的边缘。我也在左侧放置了一些填充，以确保形状保持在中心。
参见 updated fiddle使用新图像:

<div>
    <img src="http://i.stack.imgur.com/WFpjU.png" />
</div>
<div>
    <img src="http://i.stack.imgur.com/WucxK.png" />
</div>