网页打印时元素产生偏移 您所在的位置:网站首页 DWF打印偏移 网页打印时元素产生偏移

网页打印时元素产生偏移

2024-07-02 19:59| 来源: 网络整理| 查看: 265

误人子弟了,偏移产生的根本原因应该在于打印页的body的宽高与要打印的纸的尺寸不一样(如A4)而造成的打印预览页面重新布局造成的,以A4为例,将body的宽设成8.3in或597.6pt那么无论是left或right的绝对定位都不会产生偏移。

先写到这,进行步测试后再上结论

 

从下面的两张图可以看出,打印页面上的元素与打印预览上的元素产生的偏移。

可以看出,产生偏移的元素都是绝对定位的,并且指定了left.

 

解决办法:

将left改成right就可以了。

改成right有后遗证,计算left相对而言比较简单,不需要依赖它的父元素,计算right要用父元素的宽度来减去子元素的left+width,在页面不存在resize的情况下一切OK,当存大resize时问题就来了.

以打印页为例,它注册了window的resize事件,在resize时会对填充区域进行resize,而没有管填充区域的父元素,父元素是随着表格的大小自动调整宽高的,在这种情况下就会出现一个问题,父元素的宽高还没有调整好,子元素的right计算己经开始了,也就是说取了个错误的宽度,此时算出的right就会有问题。而left是始终相对于父元素最左端的,不管它宽度变不变都不会有影响.

打印页:

 

打印预览:

 

 

 引一段话(来自:http://bbs.51js.com/thread-90676-1-1.html):

经过长时间测试,以A4为例,得出打印的结论:A、打印预览的结果就是打印在纸张上的结果; 【注:对于IE浏览器,打印预览其实是一个网页,是res协议的网页资源。改网页按照特殊的方法弹出,C++,delphi等语言调用webbrowser可以实现弹出这种类型网页,VB似乎不可以实现;该页面地址为 res://ieframe.dll/preview.dlg,里面有大量hmtl和js,本人差不多搞清楚里面的机制,是IE浏览器实现的分页。不过速度比较慢,50页以上就很慢了,大家可以试试;这是IE打印模板页,可以自己定制,很多打印控件就是用这个实现的分页;】B、所有的html按照节点或者文字流顺序被切割成不同的页面进入打印预览。【至于打印预览的数据是如何生成的,那不得而知了】C:对于一个html容器node,设置容器node的overflow:hidden,容器内某div的position属性为absolute,假定left属性值保证能在视图内,则打印预览的时候,top属性值是相对于切割之后的分页面的,而不是整个容器的;这样一来若top数值过大,则可能不在分页内部,该div被隐藏,无法被打印出来;D:对于一个html容器node,设置容器node的overflow:auto,容器内某div的position属性为absolute,假定left属性值保证能在视图内,则打印预览的时候,该div能被打印出来,但位置有所偏移;E: D部分所讲的div打印位置偏移数值与上下页边距有关,还与div所在页数有关系;至于上下页边距如何取,则看IE浏览器里的数值,一般存储在注册表里; div所在页数,一般根据top的数值来定。F:打印位置是否准确,还与一个因素有关系,那就是页面的宽度值,页面不同宽度,也会导致div偏移不同;G:综上所述浮动元素打印                   偏移值d=function(上边距,下边距,top,width)

本人经过多次测试,发现有具体的规律,只是因为变量太多,太复杂,没有找出来。若有人得出这个具体的浮动元素打印偏移规律公式,那可真是太好了。

我们拭目以待!

 



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有