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

Question

我有两个非常大的PNG，它们被严重按比例缩小并放入div，水平和垂直居中。在页面的CSS中使用text-align: center实现水平居中，并且在Chrome中大部分内容似乎都运行正常。

(Fiddle)

在Firefox中，两个图像（并非所有图像）都被轻微裁剪到右侧。打开开发人员工具箱并禁用text-align: center（继承并应用于页面的大部分）可以毫无理由地修复图像。只需打开开发人员工具箱本身就可以使左图像正确显示（但不是右图），但是一旦工具箱关闭，它就会再次出现。

为什么会这样？这是预期的行为吗？一个bug？我弄乱了吗？

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>