window.print() 在 IE\Firefox 中不显示相同的打印屏幕 HTML
Posted
技术标签:
【中文标题】window.print() 在 IE\\Firefox 中不显示相同的打印屏幕 HTML【英文标题】:window.print() doesn't show printed screen HTML the same in IE\Firefoxwindow.print() 在 IE\Firefox 中不显示相同的打印屏幕 HTML 【发布时间】:2016-02-18 16:54:19 【问题描述】:当我在打印屏幕中调用 window.print() 时,打印预览在 Chrome 中看起来非常好,但在 IE\Firefox 中一些元素发生了偏移,如下所示
原始 html:
FireFox 打印预览
我有一个特定的 css 用于这个打印屏幕页面(见下文),它适用于 chrome,但不适用于其他
/** The wrapping tag for the renderer instant. Do not specify font-size,
it is rendered dynamically from the server size since it is determining
the positions of each tag. **/
BODY
BACKGROUND-COLOR: white;
color:black;
margin: 0px;
/* the instant wrapping tag */
#gx_screenArea
position:relative;
font-family: "Lucida Console", Monaco, monospace;
height:0px; /* make scrolling when needed*/
margin: 0px;
color: black;
/* input fields inside the instant wrapping tag */
#gx_screenArea input,
#gx_screenArea select
font-family: "Lucida Console", Monaco, monospace;
position:absolute;
padding: 0px;
/* labels inside the instant wrapping tag */
#gx_screenArea span,
#gx_screenArea pre,
#gx_screenArea blink,
#gx_screenArea img,
#gx_screenArea a
white-space: nowrap;
position:absolute
/* table inside the instant wrapping tag */
#gx_screenArea table
position:absolute;
/* table elements inside the instant wrapping tag */
#gx_screenArea table tr td input,
#gx_screenArea table tr td span,
#gx_screenArea table tr td select,
#gx_screenArea table tr td table
height:20px;
position:relative
/* --------------- */
/* ApplinX classes */
/* --------------- */
/* protected-field */
gx_pf
/* unprotected-field */
.gx_uf
COLOR: black;
BACKGROUND-COLOR: white;
BORDER-BOTTOM: green 1px solid;
BORDER-LEFT: WHITE 1px;
BORDER-RIGHT: WHITE 1px;
BORDER-TOP: black;
/* dynamic-disabled-input */
.gx_ddi
/* underlined field */
.gx_und
span.gx_und
text-decoration: underline;
/* combobox */
.gx_cbo
/* checkbox */
.gx_chk
/* radio */
.gx_rdo
/* hostkey */
.gx_hky,a.gx_hky:link,a.gx_hky:visited
color: black;
text-decoration: underline;
/* table */
.gx_tbl
color: black;
border-top: black 1px solid;
border-left: black 1px solid;
/* table cell */
.gx_tbl tr td
white-space: nowrap;
border-right: #666666 1px solid;
border-bottom: #666666 1px solid;
/* 1st alternating table row */
.gx_tbl_alternating1
border-left: #666666 1px solid;
background-color: #dee7e7;
/* 2nd alternating table row */
.gx_tbl_alternating2
border-left: #666666 1px solid;
background-color: #dee7c7;
/* selected table row */
.gx_tbl_selected
border-left: #666666 1px solid;
background-color: #3399cc;
/* table header */
.gx_tbl tr th
border-right: #666666 1px solid;
border-top: #cccc99 1px;
color: #39557b;
border-bottom: #666666 1px solid;
background-color: #9cceff;
text-align: center;
/* table link */
.gx_tbl A:link,.gx_tbl A:visited
text-decoration: underline;
/* window border */
.gx_wnd
z-index:-1;
BACKGROUND-COLOR: white;
border: black 1px solid;
/* error message */
.errorMsgStyle
color: #ff0000;
font-weight: bold;
/* screen name in the footer */
.OrgHostLink
font-size:15px;
color:darkgreen;
<DIV style="WIDTH: 1134px; HEIGHT: 432px; FONT-SIZE: 24px" id=gx_screenArea>
<STYLE style="BORDER-BOTTOM: medium none">#gx_screenArea INPUT
HEIGHT: 36px; FONT-SIZE: 24px
#gx_screenArea SELECT
HEIGHT: 36px; FONT-SIZE: 24px
#gx_screenArea TABLE
FONT-SIZE: 24px
</STYLE>
<SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 1px; PADDING-TOP: 6px; LEFT: 56px" id=POS4 class=gx_pf>E40.17.1</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 1px; PADDING-TOP: 6px; LEFT: 252px" id=POS18 class=gx_pf>15/10/15</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 1px; PADDING-TOP: 6px; LEFT: 490px" dir=rtl id=POS35 class=gx_pf>ôåìéñä ìáéèåç çééí îñ: 944161-2</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 1px; PADDING-TOP: 6px; LEFT: 980px" dir=rtl id=POS70 class=gx_pf>ôøèé éìãéí</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 14px" dir=rtl id=POS161 class="gx_pf ">à.÷öáú ùàøéí</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 210px" dir=rtl id=POS175 class="gx_pf ">îéï</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 308px" dir=rtl id=POS182 class="gx_pf ">ú.ìéãä</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 490px" dir=rtl id=POS195 class="gx_pf ">ùí ôøèé</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 728px" dir=rtl id=POS212 class="gx_pf ">ùí îùôçä</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 882px" dir=rtl id=POS223 class="gx_pf ">æäåé</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 966px" dir=rtl id=POS229 class="gx_pf ">îñôø</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 74px; PADDING-TOP: 6px; LEFT: 1064px" dir=rtl id=POS236 class="gx_pf ">îñôø</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 111px; PADDING-TOP: 6px; LEFT: 14px" id=POS241 class="gx_pf ">============ ==== ========= ============== ================= ============ =====</SPAN> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 148px; LEFT: 84px" id=POS326 class="gx_uf gx_intf" value=50.62 maxLength=6 name=POS326 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 148px; LEFT: 224px" id=POS336 class="gx_uf gx_intf" value=æ maxLength=1 name=POS336 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 148px; LEFT: 294px" id=POS341 class="gx_uf gx_intf" value=030289 maxLength=6 name=POS341 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 148px; LEFT: 448px" id=POS352 class="gx_uf gx_intf" value=àáøäí maxLength=10 name=POS352 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 148px; LEFT: 644px" id=POS366 class="gx_uf gx_intf" value=ùøòáé maxLength=14 name=POS366 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 148px; LEFT: 896px" id=POS384 class="gx_uf gx_intf" value=301630745 maxLength=9 name=POS384 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 148px; LEFT: 1078px" id=POS397 class="gx_uf gx_intf" value=01 maxLength=2 name=POS397 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 222px; LEFT: 84px" id=POS486 class="gx_uf gx_intf" value=37.51 maxLength=6 name=POS486 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 222px; LEFT: 224px" id=POS496 class="gx_uf gx_intf" value=ð maxLength=1 name=POS496 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 222px; LEFT: 294px" id=POS501 class="gx_uf gx_intf" value=120214 maxLength=6 name=POS501 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 222px; LEFT: 448px" id=POS512 class="gx_uf gx_intf" value=àáéâéì maxLength=10 name=POS512 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 222px; LEFT: 644px" id=POS526 class="gx_uf gx_intf" value=ùøòáé maxLength=14 name=POS526 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 222px; LEFT: 896px" id=POS544 class="gx_uf gx_intf" value=222443434 maxLength=9 name=POS544 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 222px; LEFT: 1078px" id=POS557 class="gx_uf gx_intf" value=02 maxLength=2 name=POS557 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 296px; LEFT: 84px" id=POS646 class="gx_uf gx_intf" value=99.22 maxLength=6 name=POS646 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 296px; LEFT: 224px" id=POS656 class="gx_uf gx_intf" value=æ maxLength=1 name=POS656 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 296px; LEFT: 294px" id=POS661 class="gx_uf gx_intf" value=040213 maxLength=6 name=POS661 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 296px; LEFT: 448px" id=POS672 class="gx_uf gx_intf" value=èìïå maxLength=10 name=POS672 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 296px; LEFT: 644px" id=POS686 class="gx_uf gx_intf" value=ìååï maxLength=14 name=POS686 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 296px; LEFT: 896px" id=POS704 class="gx_uf gx_intf" value=65951840 maxLength=9 name=POS704 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 296px; LEFT: 1078px" id=POS717 class="gx_uf gx_intf" value=03 maxLength=2 name=POS717 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 370px; LEFT: 224px" id=POS816 class="gx_uf gx_intf" maxLength=1 name=POS816 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 370px; LEFT: 294px" id=POS821 class="gx_uf gx_intf" maxLength=6 name=POS821 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 370px; LEFT: 448px" id=POS832 class="gx_uf gx_intf" maxLength=10 name=POS832 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 370px; LEFT: 644px" id=POS846 class="gx_uf gx_intf" maxLength=14 name=POS846 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 370px; LEFT: 896px" id=POS864 class="gx_uf gx_intf" maxLength=9 name=POS864 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 370px; LEFT: 1078px" id=POS877 class="gx_uf gx_intf" maxLength=2 name=POS877 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 444px; LEFT: 224px" id=POS976 class="gx_uf gx_intf" maxLength=1 name=POS976 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 444px; LEFT: 294px" id=POS981 class="gx_uf gx_intf" maxLength=6 name=POS981 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 444px; LEFT: 448px" id=POS992 class="gx_uf gx_intf" maxLength=10 name=POS992 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 444px; LEFT: 644px" id=POS1006 class="gx_uf gx_intf" maxLength=14 name=POS1006 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 444px; LEFT: 896px" id=POS1024 class="gx_uf gx_intf" maxLength=9 name=POS1024 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 444px; LEFT: 1078px" id=POS1037 class="gx_uf gx_intf" maxLength=2 name=POS1037 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 518px; LEFT: 224px" id=POS1136 class="gx_uf gx_intf" maxLength=1 name=POS1136 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 518px; LEFT: 294px" id=POS1141 class="gx_uf gx_intf" maxLength=6 name=POS1141 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 518px; LEFT: 448px" id=POS1152 class="gx_uf gx_intf" maxLength=10 name=POS1152 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 518px; LEFT: 644px" id=POS1166 class="gx_uf gx_intf" maxLength=14 name=POS1166 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 518px; LEFT: 896px" id=POS1184 class="gx_uf gx_intf" maxLength=9 name=POS1184 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 518px; LEFT: 1078px" id=POS1197 class="gx_uf gx_intf" maxLength=2 name=POS1197 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 592px; LEFT: 224px" id=POS1296 class="gx_uf gx_intf" maxLength=1 name=POS1296 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 592px; LEFT: 294px" id=POS1301 class="gx_uf gx_intf" maxLength=6 name=POS1301 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 592px; LEFT: 448px" id=POS1312 class="gx_uf gx_intf" maxLength=10 name=POS1312 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 592px; LEFT: 644px" id=POS1326 class="gx_uf gx_intf" maxLength=14 name=POS1326 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 592px; LEFT: 896px" id=POS1344 class="gx_uf gx_intf" maxLength=9 name=POS1344 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 592px; LEFT: 1078px" id=POS1357 class="gx_uf gx_intf" maxLength=2 name=POS1357 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 666px; LEFT: 224px" id=POS1456 class="gx_uf gx_intf" maxLength=1 name=POS1456 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 666px; LEFT: 294px" id=POS1461 class="gx_uf gx_intf" maxLength=6 name=POS1461 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 666px; LEFT: 448px" id=POS1472 class="gx_uf gx_intf" maxLength=10 name=POS1472 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 666px; LEFT: 644px" id=POS1486 class="gx_uf gx_intf" maxLength=14 name=POS1486 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 666px; LEFT: 896px" id=POS1504 class="gx_uf gx_intf" maxLength=9 name=POS1504 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 666px; LEFT: 1078px" id=POS1517 class="gx_uf gx_intf" maxLength=2 name=POS1517 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 21px; TOP: 740px; LEFT: 224px" id=POS1616 class="gx_uf gx_intf" maxLength=1 name=POS1616 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 91px; TOP: 740px; LEFT: 294px" id=POS1621 class="gx_uf gx_intf" maxLength=6 name=POS1621 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 147px; TOP: 740px; LEFT: 448px" id=POS1632 class="gx_uf gx_intf" maxLength=10 name=POS1632 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 203px; TOP: 740px; LEFT: 644px" id=POS1646 class="gx_uf gx_intf" maxLength=14 name=POS1646 gx_dt="0"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 133px; TOP: 740px; LEFT: 896px" id=POS1664 class="gx_uf gx_intf" maxLength=9 name=POS1664 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 740px; LEFT: 1078px" id=POS1677 class="gx_uf gx_intf" maxLength=2 name=POS1677 gx_dt="0" gx_ra="2"> <INPUT style="BORDER-BOTTOM: medium none; WIDTH: 35px; TOP: 851px; LEFT: 84px" id=XMT class="gx_uf gx_af gx_intf" value="" maxLength=2 type=password name=XMT gx_dt="0" gx_ra="2" gx_pos="1846"> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 851px; PADDING-TOP: 6px; LEFT: 154px" id=POS1851 class="gx_pf ">XMT</SPAN> <SPAN style="BORDER-BOTTOM: medium none; HEIGHT: 30px; TOP: 851px; PADDING-TOP: 6px; LEFT: 504px" dir=rtl id=POS1876 class="gx_pf ">F1-àéùåø ; F2-çæåø îñê ; F3-éöéàä ; F4-ùâéàåú</SPAN> </DIV>
【问题讨论】:
【参考方案1】:问题在于您对元素使用不同的定位方式。虽然普通行中的每个元素都有不同的跨度,但所有“===”只有一个跨度。所以实际的样式取决于浏览器的默认设置和它的默认字体。 您应该对这些“下划线”执行与对所有其他元素相同的操作。
替换<SPAN style="...">============ ==== ========= ============== ================= ============ =====</SPAN>
每个“=”序列都有一个跨度:
<SPAN>============</SPAN>
<SPAN>====</SPAN>
...
还要避免使用内联样式,这确实是一团糟,没有人知道您尝试做什么。而是尝试为每列使用不同的类 (class="column_1"
),然后您可以同时将该列中的所有元素放置在您的 css 文件中:
#column_1
margin-left: 30px;
padding-left: 5px;
或类似的东西。
您的代码的开头可能如下所示:
<DIV id=gx_screenArea>
<SPAN id=POS4 class="gx_pf column_1">E40.17.1</SPAN>
<SPAN id=POS18 class="gx_pf>15/10/15 column_2"</SPAN>
<SPAN dir=rtl id=POS35 class="gx_pf column_3">ôåìéñä ìáéèåç çééí îñ: 944161-2</SPAN>
<SPAN dir=rtl id=POS70 class="gx_pf column_4">ôøèé éìãéí</SPAN>
<SPAN dir=rtl id=POS161 class="gx_pf column_1">à.÷öáú ùàøéí</SPAN>
<SPAN dir=rtl id=POS175 class="gx_pf column_2">îéï</SPAN>
<SPAN dir=rtl id=POS182 class="gx_pf column_3">ú.ìéãä</SPAN>
<SPAN dir=rtl id=POS195 class="gx_pf column_4">ùí ôøèé</SPAN>
<SPAN dir=rtl id=POS212 class="gx_pf column_5">ùí îùôçä</SPAN>
<SPAN dir=rtl id=POS223 class="gx_pf column_6">æäåé</SPAN>
<SPAN dir=rtl id=POS229 class="gx_pf column_7">îñôø</SPAN>
<SPAN dir=rtl id=POS236 class="gx_pf column_8">îñôø</SPAN>
<SPAN id=POS241 class="gx_pf column_1">============</SPAN>
<SPAN id=POS241a class="gx_pf column_2">====</SPAN>
<SPAN id=POS241b class="gx_pf column_3">=========</SPAN>
<SPAN id=POS241 class="gx_pf column_4">==============</SPAN>
...
【讨论】:
以上是关于window.print() 在 IE\Firefox 中不显示相同的打印屏幕 HTML的主要内容,如果未能解决你的问题,请参考以下文章
window.print() 和 window.close() 函数 Safari IOS 关闭窗口而不等待打印预览
window.print() 是不是适用于 iPad 上所有版本的 Safari?