2 
<html>
<head>
</head>
<body>
    <div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
        <div style="position: absolute;left: 204px; top: 64px;">
            <h1>One</h1>
        </div>
    </div>
    <div style="page-break-after: always"></div>
    <div style="height:9.5in;width:7in;position:relative;overflow:hidden;">
        <div style="position: absolute;left: 204px; top: 64px;">
            <h1>Two</h1>
        </div>
            <div style="position: absolute;left: 204px; top: 164px;">
            <h1>Three</h1>
        </div>
    </div>
</body>
</html>

上記のコードは、ブラウザでは正常に表示されますが、firefox の print/print-preview では、2 ページ目の css top が機能しません。"Two" と "Three" の両方の単語が上書きされました。適切に整列するのを手伝ってください。 ここに画像の説明を入力

4

2 に答える 2

0

この質問を見つけるまで、私は一日中このバグと戦っていました。それは私を正しい方向に向けました。purgatory101 からの修正はうまくいきませんでしたが、少なくとも FF は絶対位置で何も印刷できないことがわかりました。これを相対に変更したところ、機能するようになりました。プリンターから出てくると、少し右に移動するというバグがまだあります (プレビューは問題ありませんが、用紙は問題ありません) が、これは私にとって大きな成功です。

だから私の解決策：配置に必要なものすべてを絶対配置のdivラッパーに配置し、内部に以前に使用したのと同じ座標で相対divを配置できます。

<div style="position: absolute;">
       <div style="position: relative; top: ...">
             blah
       </div>
       <div style="position: relative; top: ...">
             bleh
       </div>
</div>

更新: IE が同様のバグで苦しんでいることに気付きました - すべての絶対配置要素は 2 ページ目 (例: z-index または opacity) から CSS スタイルを失いますが、少なくともそれらは正しい座標にとどまります。クロムだけがすべてを正しく行っているように思えます。

于 2014-02-18T08:27:54.650 に答える
0

Firefox には、この動作を引き起こすトリッキーな印刷レンダリングのバグがあります。Firefox の 2 番目 (またはそれ以上) の印刷ページの上余白が 1 ピクセル高すぎます。私が「y-posデッドゾーン」と呼ぶものの中にいると、要素のy位置が無視されるため、テキスト「Two」と「Three」が、両方ともCSS定義を持っているかのように互いの上にレンダリングされます。 :0px.

最も簡単な修正/ハックは、最初のページを過ぎた任意のページに margin-top:1px を追加することです。

この問題をよりよく視覚化したい場合は、絶対位置の div に境界線を追加してください。

(Firefox がレンダリングをどのように行っているかについての洞察が必要な場合は、負の margin-top:-80px を設定してみてください。これには、レンダリングのバグがまだあります。しかし、-85px まで上げると、突然バグはなくなります。これは、このバグは、Firefox がページ間の余白の周りをレンダリングしようとする方法に関係しています。)

于 2012-12-04T16:37:23.330 に答える