当我在打印屏幕中调用 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>最佳答案
问题在于您对元素使用了不同的定位方式。虽然普通行中的每个元素都有不同的跨度，但所有“===”只有一个跨度。所以实际的样式取决于浏览器的默认值和它的默认字体。
您应该像对待所有其他元素一样对待这些“下划线”。
替换<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>
...
关于javascript - window.print() 在 IE\Firefox 中不显示相同的打印屏幕 HTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33754912/