Question

当我在我的打印屏幕上调用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>

Answer 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

1 个答案: