0

問題の説明は次のとおりです。まずscreen、ページの幅全体 (基本的にはマストヘッド) にまたがるページの上部にある Web ページ バージョン (メディア) に背景のロゴ画像が表示されます。

次に、印刷スタイルシートを追加し、特定の部分を隠したり表示したりして、ユーザーとプリンターのエクスペリエンスを最適化しました。

ただし、ここに問題があります.IEでは、印刷プレビューのすべてのページで、ページのコンテンツが合計数で複数のページに十分な場合、印刷物のすべてのページの上部にロゴ画像が追加されていることに気付きました.ページの。したがって、3 ページに十分なコンテンツがある場合、これら 3 ページすべてで、最初のページにのみ表示されるはずのロゴ イメージが、印刷物のすべてのページの上部に表示されます。

CSS をチェックしましたが、何が起こっているのかわかりません。背景画像を定義する CSS クラスを含むセクションが複数回繰り返されていません。これは IE でのみ発生します。Chrome でも Firefox でもありません。

HTML の抜粋を次に示します。

    ....
    <body>
        <div class="repeating-bg-img">
            <div class="container">
            ...
            <!-- /.inner content that is long enough for more than one page -->

            ...
            </div><!-- /.container -->
        </div><!-- /.repeating-bg-img -->
    </body>
</html>

そして、これはスタイルシート内の CSS の抜粋であり、print.cssmedia = print:

.repeating-bg-img {
    background: #ffffff url('../img/background-image.png') scroll repeat-x left top;
}

IEでこれに遭遇した人はいますか？もしそうなら、これに対する修正はありますか？

4

1 に答える 1

1

今日も同じ問題に遭遇しました。1 つの解決策は、次のような構造です。

<body>
  <div id="background" style="position: relative;">
  <img src="bkgnd.png" style="position: absolute; z-index: -1;">
    <div class="container" ...>
    ...
    </div>
  </div>
</body>

基本的な考え方は、フローから画像を取り出し、それを含む <div> に対して相対的に配置することです。z-index はそれを他の要素の後ろに押し込みます。したがって、これはあらゆる種類の列ヘッダーとして使用できます。

これの利点の 1 つは、印刷ダイアログで「背景画像」オプションが設定されていなくても、背景画像が印刷されることです。適切な解決策も見たいと思います。

編集 2013/07/23 :

CSS3 プロパティが になるようbox-decoration-breakです。これは古いバージョンの IE では役に立ちませんが、仕様はhttp://www.w3.org/TR/css3-background/#box-decoration-breakで入手できます。

あなたが本当に欲しいのがマストヘッドなら、これもうまくいくかもしれないと思いました：

@media print {
  div#background { background: none; }
  @page  :first  { background: url('bkgnd.png') center no-repeat;
                 margin: ...; }
}

しかし、それもCSS3のようです。Chrome はサーバーから画像を読み込みますが、'margin' 属性のみを受け入れます。Firefox と IE9 はそれをすべて無視しているようです。

于 2013-07-23T00:59:02.433 に答える