使用-webkit-transform: scale(...)时出现不必要的左边距

Question

21

我正在使用wkhtmltopdf（它使用Webkit渲染引擎）将HTML文件转换为PDF文档。生成的PDF是A4大小，也就是说它们有固定的尺寸和受限制的宽度。

我的PDF中的一个表格包含图片，并以拼图样式精细地组合在一起，有时需要占用大量空间。

为了使这个结果适合A4 PDF的限制，我正在应用CSS属性-webkit-transform：scale（...）;

这个属性可以很好地缩放拼图，而且仍然清晰可辨，但由于某种原因它还会将包含拼图的表格推向右侧。它似乎在拼图表格的左侧添加了显著的边距，尽管我已经明确将其左边距设为0。

有趣的是，从我的Webkit转换中缩小比例开始，左边的边距越大。例如，如果我使用scale（0.75），则左边的边距约为200像素。如果我使用scale（0.5），则左边的边距约为400像素。

我已经尝试使用绝对、固定和相对定位来将拼图表格对齐到左侧，并使用left：0进行对齐。我还尝试过向左浮动它，以及将它放在text-align设置为左对齐的容器中。但是这些技术都不起作用。

有什么想法可以解决这个左边距的问题，并且如何删除它/解决它？

- Kosta Kontos

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kosta Kontos · Accepted Answer

经过一番试错，将以下CSS代码添加到拼图表格中就解决了问题：

-webkit-transform-origin-x: 0;

更新：请参见Richar-dW下方的评论以获取跨浏览器支持。