我尝试使以下简单的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>
我想将第一个div的内容打印到第一页,横向打印,第二个打印带纵向打印.但是,所有浏览器(Chrome,Opera,Safari,IE10)都会打印两个纵向页面.我错过了什么或者没有一个浏览器支持这种功能吗？在后一种情况下,是否有任何替代方案可以实现这一结果？
一个快速而肮脏的黑客将使用CSS3或过滤器旋转90度的景观.以下将有效:
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
目前还没有简单的方法可以通过任何其他方式执行此操作,因为sizeCSS指令仅由一个浏览器(Opera)实现,但仍然是当前草稿的一部分(Is @Page {size:landscape}已废弃？对于弃用,http://www.w3.org/TR/css3-page/#page-size(规范).
下一个最便宜的黑客是我上面提到的:将你的HTML放在肖像上......并使用CSS3旋转90度.