用于打印 HTML 的不同页面方向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14903427/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Different page orientation for printing HTML
提问by tungi52
Code:
代码：
I try to make the following simple HTML page work:
我尝试使以下简单的 HTML 页面工作：
<html>
<head>
<style type="text/css">
@media print
{
@page port { size: portrait; }
.portrait { page: port; }
@page land { size: landscape; }
.landscape { page: land; }
.break { page-break-before: always; }
}
</style>
</head>
<body>
<div class="landscape">
<p>This is a landscape page.</p>
</div>
<div class="portrait break">
<p>This is a portrait page.</p>
</div>
</body>
</html>
Question:
题：
I want to print the first div's content onto the first page, with landscape orientation, and the second one with portrait mode. However, all browsers (Chrome, Opera, Safari, IE10) print two portrait pages. Did I miss something or do none of the browsers support this kind of feature yet? In the latter case is there any alternative to achieve that result?
我想将第一个 div 的内容打印到第一页，横向打印，第二个打印纵向模式。但是，所有浏览器（Chrome、Opera、Safari、IE10）都会打印两个纵向页面。我是否遗漏了什么或没有浏览器支持这种功能？在后一种情况下，是否有其他选择来实现该结果？
采纳答案by Sébastien Renauld
A quick and dirty hack would be to rotate the div that is meant to be in landscape by 90 degrees using CSS3 or filters. The following would work:
一个快速而肮脏的技巧是使用 CSS3 或过滤器将意在横向的 div 旋转 90 度。以下将起作用：
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
There is currently no easy way to do this in any other way, as the sizeCSS directive is only implemented by one browser (Opera), but is nevertheless part of the current drafts ( Is @Page { size:landscape} obsolete?for the deprecation, http://www.w3.org/TR/css3-page/#page-sizefor the spec).
目前还没有简单的方法来做到这一点任何其他方式，如sizeCSS指令仅由一个浏览器（Opera）的实现，但仍然是当前的草案（部分是@Page？{大小：景观}过时的弃用，http://www.w3.org/TR/css3-page/#page-size为规范）。
The next cheapest hack is what I mentioned above: lay your HTML out on a portrait...and rotate by 90 degrees using CSS3.
下一个最便宜的 hack 就是我上面提到的：将 HTML 放在肖像上……然后使用 CSS3 旋转 90 度。
回答by Reinier Kaper
The sizeproperty is not used (anymore), so I wouldn't rely on that. The most pragmatic way would be to generate PDF's on the server before printing.
该size属性不再使用（不再使用），所以我不会依赖它。最实用的方法是在打印前在服务器上生成 PDF。
The rotating solution provided by Seéastien would also work, but only in browsers that support it.
Seéastien 提供的旋转解决方案也可以使用，但只能在支持它的浏览器中使用。
