我有一个HTML报告，需要打印的景观，因为许多列。是否有一种方法可以做到这一点，而不需要用户更改文档设置?
浏览器中有哪些选项。
当前回答
引用自css - discussion Wiki
The @page rule has been cut down in scope from CSS2 to CSS2.1. The full CSS2 @page rule was reportedly implemented only in Opera (and buggily even then). My own testing shows that IE and Firefox don't support @page at all. According to the now-obsolescent CSS2 spec section 13.2.2 it is possible to override the user's setting of orientation and (for example) force printing in Landscape but the relevant "size" property has been dropped from CSS2.1, consistent with the fact that no current browser supports it. It has been reinstated in the CSS3 Paged Media module but note that this is only a Working Draft (as at July 2009). Conclusion: forget about @page for the present. If you feel your document needs to be printed in Landscape orientation, ask yourself if you can instead make your design more fluid. If you really can't (perhaps because the document contains data tables with many columns, for example), you will need to advise the user to set the orientation to Landscape and perhaps outline how to do it in the most common browsers. Of course, some browsers have a print fit-to-width (shrink-to-fit) feature (e.g. Opera, Firefox, IE7) but it's inadvisable to rely on users having this facility or having it switched on.
其他回答
这对我也很管用:
@media print and (orientation:landscape) { … }
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
在Firefox 16.0.2中不能运行，但在Chrome中可以运行
我的解决方案:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
With media="print"只适用于print。 这适用于IE, Firefox和Chrome
如前所述，size属性是您所需要的。要在打印时设置页面的方向和大小，您可以使用以下命令:
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
下面是@page文档的链接。
这是我想到的-添加一个负旋转<html>元素和一个正旋转等于abs值<身体>。这节省了添加大量的CSS样式的身体，它的工作就像一个魅力:
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}
