サイドノート付きの文書を印刷、位置：相対および位置：絶対

Question

私は古い文書のWeb版で作業しています。私はFirefoxとChromeで正しく表示されるように管理しましたが、印刷に問題があります。最初のページの上部にサイドノートがすべて詰まっています（image）。

私は以前の文書の最初のセクションをここに入れていますので、自分で試してみることができます：http://www.dinkypage.com/117588。印刷プレビューで見られるように、段落番号とページ番号は正常に機能します（小さな問題は1つだけです）。それは重大な問題を引き起こしているばかです。

私はコードを理解することは非常に簡単ですが、ここではCSSスタイルの最も重要なスニペットだと思う

：

.sidenote, .widenote { 
    position: absolute; 
    left: 745px; 
    margin-top: 12px; 
    text-align: left; 
    line-height: 1.17em; 
    font-size: 12px;} 
.sidenote {width: 200px;} 
.widenote {width: 400px;} 
.sidenote span, .widenote span { 
    display: block; 
    position: relative; 
    text-indent: 5px; 
    padding: 0px 0px 8px 0px} 

私はposition:relative sおよびposition:absolute秒で混乱しましたが、私はできませんそれが適切に機能するようにしてください。どんな助けもありがとう。ありがとう！

編集：私はjsfiddleにそれを入れているが、それは何らかの理由でページ番号をインクリメントすることを拒否：http://jsfiddle.net/KDzRp/

Answer 1

あなたが「.sidenote、.widenote」の「トップ」をspecityする必要があり、FFとChromeは、HTMLの外観によって、絶対配置された要素のTopを決定できますが、古いブラウザ（およびあなたのプリンタは明らかにそのようなプリンタ）では実行できません。

ポジションを使用する場合：絶対に常に「左右」と「縦（上/下）」の両方の位置を注意してください。

あなたのサイト/ワイドノートの正確なトップの位置を指定することができない場合は、位置の各ページをラップする必要があります。相対的なコンテナとトップ与える：0あなたのsidenotesへ：

<div class='page'> 
    <p>...</p> 
    <aside class='sidenote'>...</aside> 
</div> 

.page {position:relative;} 
.sidenote {position:absolute; top:0; right:0; ...} 

このあなたのサイドノートは、それ自身のセクションの上部に固執します。