Firefox 的 CSS 缩放和旋转问题答案

【问题标题】：Firefox Issues with CSS scale and rotationFirefox 的 CSS 缩放和旋转问题
【发布时间】：2011-12-09 15:45:50
【问题描述】：

我有一个高尔夫记分卡生成器。从结构上讲，该页面有一个 .printarea 类的 div，其中包含一个 1072 像素宽的表格。

我已经逐渐了解它，因此打印在所有主要浏览器中都以横向显示单个页面。

在 Firefox 中，如果在 BODY 上指定了旋转和缩放，那么缩放将无法工作。所以我将旋转移动到包含其他所有内容的 DIV。这实现了旋转但偏移了表格，以便在右侧（表格底部）和顶部（表格右侧）发生一些裁剪。

我试图用边距和绝对定位来纠正这个问题，但这导致表格的小块不连贯的部分被分流到第二页。将比例缩小到很小的比例也不会解决第二页的位置问题。

使用原点设置我最终到达position:absolute; -moz-transform-origin: 400px 900px; 这会丢失表格顶部（页面左侧）的一部分并替换最后两行，尽管表格的底部（页面右侧）距离纸边很容易 3 英寸。即使缩小到很小的比例也不能纠正位移。

这是一张卡片的静态副本：http://egolfplan.com/example.html

在帖子的最后，我将添加打印的 PDF 屏幕截图。

当前的 CSS

<style type="text/css" media="print">
    BODY {
        width:100%;
        height:100%;
        -webkit-transform: rotate(-90deg) scale(.68,.68); 
        -moz-transform:scale(.48,.48);
         zoom: 60%;
    }
    .printarea {
        width:100%;
        height:100%;
        -moz-transform:rotate(-90deg);
    }
    @page {margin: 0;}

 </style>

这被缩放到 68%

缩放至 48%

-moz-transform-origin: 400px 900px;

【问题讨论】：

这不是您应该让您的打印机（驱动程序）为您处理的事情吗？
Matijs 如果这是给我的，当然。这是给公众的，他们无法处理这方面的指示或被打扰。

标签： css firefox css-transforms

【解决方案1】：

一般来说，鉴于不同的浏览器实现，我认为通过 CSS 进行旋转是不可靠的，尤其是在您的情况下，因为您使用的是浏览器特定的属性。

我会做以下事情之一。

使用强大的 javascript 库，例如 jQuery Rotate (http://code.google.com/p/jquery-rotate/) 而不是 CSS。
写一些实际生成此分数图像的服务器端代码卡片，可以很容易地缩放或旋转。例如，PhP 可以做到这一点。
将您的设计更改为避免使用垂直文本。

【讨论】：

感谢您的回复。根据code.google.com/p/jquery-rotate 的文档，该模块用于旋转图像而不是 HTML 布局。这个答案不符合赏金的目标。

【解决方案2】：

由于您必须使用特定的供应商属性并且它们会呈现不同，我建议您使用 CSSSandpaper。本文谈你的需求：http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

【讨论】：

【解决方案3】：

Firefox 似乎在应用打印样式表之前确定用于打印的分页符。这会导致将比例变换应用于每个打印页面，而不是整个正文块。

【讨论】：

【解决方案4】：

我们最终使用 Browshot.com 将每张卡片呈现为 JPEG 屏幕截图并将其作为下载发送给用户。

【讨论】：