Firefox 的 CSS 缩放和旋转问题

发布于 2024-12-20 13:27:30 字数 1320 浏览 4 评论 0原文

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

我已经逐渐明白了这一点，因此打印在所有主要浏览器中都以横向方式呈现单个页面。

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

在此处输入图像描述

原文

I have a golf score card generator. Structurally the page has a div of class .printarea wrapping a 1072px wide table.

I have gradually been getting it so printing presents a single page in landscape orientation in all major browsers.

In Firefox if rotation and scale are specified on BODY then scale fails to work. So I moved the rotation to the DIV containing everything else. This achieved rotation but offset the table so that some cropping occurs on the right side (bottom of table) and top (right side of table).

I attempted to correct this with margins and with absolute positioning but this resulted in small disjointed pieces of the table shunted to a second page. Reducing scale even to tiny proportions never resolves the second page placement.

Playing with origin settings I eventually get to position:absolute; -moz-transform-origin: 400px 900px; This loses part of the top of the table (left side of page) and displaces the last two rows despite the fact that the foot of the table (right side of page) is easily 3 inches from edge of paper. Scaling down even to tiny proportions does not correct the displacement.

Here's a static copy of one card: http://egolfplan.com/example.html

At end of post I will add screenshots of PDFs from printing.

Current 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>

This is scaled to 68%

enter image description here

Scaled to 48%

enter image description here

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

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

萌逼全场 2024-12-27 13:27:30

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

我会执行以下操作之一。

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