dro*_*nus 19 html css printing
是否可以打印带有真正绝对定位元素的HTML页面？似乎所有浏览器都在这里搞得一团糟.很容易通过绝对单位(例如,cm)定义一个主体,并position: absolute在内部放置元素.但是,每个浏览器似乎都试图打印这样的页面.FF例如是添加打印页边距,即使在linux上打印到PDF时,尽管有0页边距页面设置.在每种情况下,Chrome似乎都会缩小页面.那么如何打印具有绝对定位的东西,例如.纸张形式字段,标记等？我忽略了什么吗？
Zet*_*eta 25
遗憾的是,CSS3模块:Paged Media允许所有这些发生.这是关于页面太大的规则:
如果页面框与目标页面尺寸不匹配,则用户代理可以选择(按优先顺序):
- 在较大的页面上以指定的大小渲染页面框.
- 如果这将使页面框适合页面,则将页面框旋转90°.
- 缩放页面框以适合页面表.(缩放时无需保持页面或页面上任何元素的宽高比;但是,首选保留宽高比.)[由Chrome完成]
- 重新格式化页面内容,包括"溢出"到其他页面表.[由许多其他或较旧的浏览器完成]
- 剪辑溢出内容(最不喜欢).
用户代理应在执行这些操作之前咨询用户.
当页面框小于页面大小时,用户代理应将页面框置于工作表中心,因为这将对齐双面页面并避免意外丢失在工作表边缘附近打印的信息.
这是违反所有position内容的规则:
3.7.页面框外的内容
[...]此外,当盒子绝对定位时,它们可能会在"不方便"的位置结束.例如,图像可以放在页面框的边缘.类似地,当盒子使用固定或相对定位时,它们也可能最终位于页面框之外.
这些元素的确切格式的规范不在本文档的范围之内.但是,我们建议作者和用户代理遵守以下关于页面框外部内容的一般原则:
- 用户代理应该避免生成大量的空页框以保证元素的定位(例如,您不想打印100个空白页).但请注意,生成少量空页框可能需要遵守"page-break-before"和"page-break-after"的"left"和"right"值.
- 作者不应该将元素放置在不方便的位置,以避免渲染它们.代替:
- 要完全禁止生成框,请将"display"属性设置为"none".
- 要使框不可见,请设置"可见性"属性.
- 用户代理可以通过多种方式处理位于页面框外部的框,包括丢弃它们或在文档末尾为它们创建页面框.
看一下3.7节的第二段:这些元素的确切格式规范不在本文档的范围之内.由于没有其他文档,没有其他指南,因此本段后面的一般原则,每个浏览器都可以做任何想做的事情.
这是CSS3模块中目前存在的缺陷之一.但是,我认为CSS4或修改后的CSS3模块无法删除这些缺陷,因为各种可能的样式表和结果布局太大了.另请注意CSS打印配置文件中的一个小脚注:
‡打印机可以忽略在正常流程中当前元素的位置之前放置在页面上的定位元素.
因此,基本上不可能在每个浏览器中创建相同的效果.目前,实现便携式文档的唯一可能方法是使用第三方应用程序或PDF打印机以及您最喜欢的浏览器创建PDF.只要W3C的建议不严格或浏览器供应商实现他们想要的任何东西,其他方式都必然会失败.
也可以看看:
如果你有一堆position:absolute需要打印的元素,有时候一个元素是否真的需要绝对定位,或者是否可以稍微不同或更简单的方式实现相同的效果.另请注意,您应该使用display:none印刷媒体不需要的每个元素,例如广告,导航等...
正如你所说,网页浏览器在打印时往往会做疯狂的事情.面向打印的引擎通常更好.
WeasyPrint是一个开源引擎,可以呈现PDF并支持绝对定位以及CSS 3 Paged Media来设置页边距:
@page { margin: 1cm /* or 0, if you want */ }
小智 3
让你的容器有相对位置。这是在每个屏幕和纸张上将绝对定位元素保持在同一位置的唯一方法。因此，如果您的主 div（所有内容所在的 div）将以下内容添加到您的 css 中：
#maindivname{position:relative;}
应该做到这一点。