Question

目前我正在使用FireFox最新版本和IE8

要更改打印方向，我使用了

@page {
  size: portrait;
}

在我的css文件中。 @page reference

虽然它声称两个浏览器都支持@page，但在我测试之后它除了Chrome之外根本不起作用。我想知道如何在FireFox / IE8中以不同方向打印页面。

Answer 1

现在没有任何应用程序可以依赖此功能来跨浏览器工作，因为在大多数浏览器中，打印页面方向的CSS3标准仍在实施中。

对于谷歌浏览器，它可以正常工作：http://dev.activisual.net/test.html

最终决定在打印过程中更改方向继电器（即使它有效），因此您可以简单地让用户知道他们应该以横向或纵向打印页面，但通常会赢得这是一种防止用户在桌面浏览器上打印时改变方向的方法。

这是最近报道的FF的错误报告： https://bugzilla.mozilla.org/show_bug.cgi?id=851441

您可以阅读此问题的已接受答案以供参考： Landscape printing from HTML

Answer 2

正如MDN参考文献所述：

您只能更改边距，孤儿，寡妇和分页符该文件。尝试更改任何其他CSS属性将是忽略。

就为您提供达到您想要的标记而言，这将超出SO所允许的范围。此外，它可能有点工作，因为您希望IE的两代版本能够像当前一代Firefox那样尝试执行。

Answer 3

默认情况下，页面打印布局是纵向，要更改为横向并查看差异，请尝试以下操作。

从版本19.0开始支持以下css代码，尝试一下，它应该可以解决您的问题：对于IE8，您应该在html中使用HTML5指令

<!doctype html>

Css代码：

@media print{@page {size: landscape}}

Firefox：https://developer.mozilla.org/en-US/docs/Mozilla_CSS_support_chart Firefox support

IE http://msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx enter image description here

Answer 4

这很奇怪

{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

对于最新版本的Firefox不起作用，因为我自己测试并且工作正常。

如果你找不到任何外观here，即使这不是正确的肖像模式（用于打印），但你可能会得到一些想法。

最后，如果你绝望而且你真的需要找到一种方法来做到这一点，你总是可以截取网页的截图，例如html2canvas旋转图像，然后打印图像而不是网页... 不是理想的解决方案，但这样可以绕过浏览器。

Answer 5

我在制作一个简单的表格时遇到了这个问题。

Chrome似乎是限制用户控制打印过程的最佳浏览器。但它仍然有限，Firefox /其他浏览器不支持@page。

我的解决方案是在样式表中添加@media打印，以“鼓励”用户以纵向方式打印页面。 @page仅适用于chrome。 display：none;在标题，导航和页脚上摆脱了不需要的浏览器添加（这只适用于chrome和firefox，即你仍然必须选择没有标题）我有一个边框：0;在输入字段上，因为它是一个表单... 最后，我在容器div上放置了一个宽度和高度，类似于标准8.5 x 11张纸的尺寸。所以它很适合页面。

@media print{
    @page {size: auto; margin: auto;}
    header nav, footer {display: none;}
    input {border: 0px;}
    #container  {width:9.1in; height:10in;}

}

最终网页打印仍然非常依赖于浏览器/用户，并且实际上没有太多可以做的事情。使@media打印有所帮助，但实际上唯一能让页面完全按照您想要的方式打印的方法是生成用户可以导出的页面的pdf版本。

Answer 6

只需转到文件，点击页面设置并更改方向。这对我有用

在FireFox和IE 8中打印横向或纵向

6 个答案: