Firefox发布CSS规模和轮换问题

Question

我有一个高尔夫记分卡发生器。从结构上来说，页面上有一个包含1072px宽表格的.printarea类。

我逐渐得到它，因此打印在所有主流浏览器中都以横向方式呈现单页。

在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;

Answer 1

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

我会做以下其中一项。

1. 使用强大的javascript库，例如jQuery Rotate （http://code.google.com/p/jquery-rotate/）而不是CSS。

2. 写一些 实际生成此分数图像的服务器端代码 卡，可以很容易地缩放或旋转。 PhP可以做到这一点。

3. 将您的设计更改为 避免使用垂直文本。

Answer 2

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

Answer 3

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

Answer 4

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