Question

我正在处理一个旧文档的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和position:absolute混淆了，但我无法让它正常工作。任何帮助，将不胜感激。谢谢！

编辑：我已经把它放在了jsfiddle上，但由于某些原因它拒绝增加页码：http://jsfiddle.net/KDzRp/

Answer 1

你需要为“.sidenote，.widenote”指定“顶部”，FF和Chrome可以通过它在HTML中的外观来确定绝对定位元素的顶部，但旧版浏览器（显然是你的打印机）不能如此。

使用position：absolute时，请始终注意“hoziontal（left / right）”和“vertical（top / bottom）”位置。

如果您无法指定站点/宽音符的确切顶部位置，则需要将每个页面包装在一个位置：相对容器中，并在旁注中给出顶部：0。

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

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

这样你的旁注就会贴在它自己部分的顶部。

打印带侧注的文档，位置：相对位置和绝对位置

1 个答案: