用旁註打印文檔，位置：相對位置：絕對

我正在研究一箇舊文檔的Web版本，它有註釋。我已經設法在Firefox和Chrome瀏覽器中正確使用它，但是打印出現問題：第一頁頂部的註腳都會卡在一起（image）。用旁註打印文檔，位置：相對位置：絕對

我已經在這裏放置了舊文檔的第一部分，以便您可以自己嘗試：http://www.dinkypage.com/117588。正如您將在打印預覽中看到的那樣，段落編號和頁碼可以正常工作（只有一個小問題），這只是造成重大問題的附註。

我認爲的代碼是很容易理解，但這裏的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 S，但我不能讓它正常工作。任何幫助，將不勝感激。謝謝！

編輯：我已經把它掛在的jsfiddle，但它拒絕遞增頁碼因爲某些原因：http://jsfiddle.net/KDzRp/

來源

2011-06-25 76987

您的文檔示例部分的打印預覽會爲我正確顯示註釋。 Chrome 12，OSX 10.6。 – Brent

@Brent：感謝您試用它，但我認爲Chrome甚至不打印預覽。我的Chrome是最新的，所以我錯過了什麼？謝謝。 – 76987

如果我去文件 - >打印...對話框給了我一個「預覽」按鈕。 – Brent

您需要specity「頂」爲「.sidenote，.widenote」，FF和Chrome可以通過它在HTML中的外觀來確定絕對定位元素的頂部，但是舊版瀏覽器（顯然是您的打印機）無法這樣做。

使用位置：絕對始終注意「hoziontal（左/右）」和「垂直（上/下）」位置。

如果您不能指定網站/寬音符的準確榜首的位置，你需要包裝在一個位置，每一頁：相對容器，並獲得最佳：0您圖片的標題說明：

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

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

這方式您的旁註將堅持它自己的部分的頂部。

來源

2011-06-25 22:33:13

我並不確定如何實施您的建議。我在我的'.sidenote，.widenote'造型中添加了'top：0px;'，但它只是重新創建了最初僅在Firefox的打印預覽中找到的碰撞過程：http://www.dinkypage.com/117593 – 76987

是的，這是我說的是，當你不把它放在最前面時，FF足夠聰明，可以放在正確的位置，但不是打印機。我強烈建議你去做我上面提出的最後一個建議，對每個有附註（例如頁面）的部分使用包裝，等等...... –

我會給它一個鏡頭，但我有一個問題：因爲'.maintext p.normal'已經用'position：relative'來設置樣式，那麼爲什麼有必要使用'position：relative'來設置_additional_包裝樣式呢？謝謝。 – 76987

用旁註打印文檔，位置：相對位置：絕對

回答

相關問題