21

コード：

次の単純な 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 のコンテンツを最初のページに横向きで印刷し、2 つ目のページを縦向きで印刷したいと考えています。ただし、すべてのブラウザー (Chrome、Opera、Safari、IE10) は 2 つの縦向きのページを印刷します。何か見逃していたのでしょうか、それともこの種の機能をサポートしているブラウザーがまだありませんか? 後者の場合、その結果を達成するための代替手段はありますか?

4

2 に答える 2

7

CSS3 またはフィルターを使用して、ランドスケープにする予定の div を 90 度回転させるという手っ取り早い裏技があります。次のように動作します。

-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

size現在、 CSS ディレクティブは 1 つのブラウザー (Opera) によってのみ実装されているため、他の方法でこれを行う簡単な方法はありませんが、それでも現在のドラフトの一部です ( Is @Page { size:landscape} obsolete?の非推奨について、http://www.w3.org/TR/css3-page/#page-size仕様)。

次に安価なハックは、上で述べたものです。HTML を縦向きに配置し、CSS3 を使用して 90 度回転させます。

于 2013-05-16T19:53:03.650 に答える