打印所有包含绝对元素的页面

Question

source code

风格

.page{
position:relative;
right:0mm;
height:279mm;
margin:0;
border:1px solid black;
}

*{margin:0;padding:0;}

html

<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>

<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>


<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>


<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>


<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>


<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>


<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>


<div class="page">
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`
     </div>
    <div style="position:absolute;top:0px;right:0px ">
      some `DIV` with `position:absolute;top;right`    
    </div>
    <div style="position:absolute;top:0px;right:0px ">
          some `DIV` with `position:absolute;top;right`
    </div>
</div>

页面大小为 A4 纸。

虽然在 Firefox 中显示所有页面，但 在打印预览中只显示第 7 页的第一页？

在ie和chrome打印预览是正确的！

这个问题对Splitting Absolutely positioned frames not implemented - Missing second page of content when printing or print previewing this site 有影响吗？

Answer 1

你可以这样做，它可能不是正确的答案。但它会帮助你朝着正确的方向前进

链接

http://www.w3schools.com/css/css_mediatypes.asp

正常使用

.page{
position:relative;
right:0mm;
height:279mm;
margin:0;
border:1px solid black;
}

*{margin:0;padding:0;}

用于打印目的

我们总是创建不同的 CSS

只显示需要的内容

您可以使用 !important

覆盖 css 属性

@media only print
{
    body * { display: none !important; }
    body:after { content: "Don't waste paper!"; }
.page{ position:relative!important;; right:0mm; height:279mm; margin:0; border:1px solid black;}
}

set every div in special position with special top and right

很抱歉，您不能在印刷版中做到这一点。

如果你知道如何添加它也会影响其他部分，如页眉、页脚、不一致的表格。

我的建议是制作一个标准的顶部、右侧和位置。让页面看起来整洁干净。