Web瀏覽器中的打印兼容性
[英]print compatibility in web browsers
問題描述
我正在將以下內容作為一個簡單的html文件運行。問題是當我在Firefox上運行它時，我得到的視圖與chrome上的視圖不同，即如果使用chrome，則在表格的頁面末尾有多余的空間，因為我是在打印預覽的末尾獲得更多頁面，我希望它看起來像在Firefox中一樣。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 05, 2001 08:55 AM -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
<META NAME="Author" Content="NetCorrespondence.com">
<TITLE>Printing Work Order</TITLE>
</HEAD>
<BODY>
<img src="/CFFileServlet/_cf_image/_cfimg5646601472618022292.PNG" alt="" />
<P>
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%" VALIGN="TOP">
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%"><b><font size="+1"> </font></b></TD>
<TD WIDTH="50%">
<P ALIGN="RIGHT"><b>WORKORDER - Pest Control Services</b>
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<table>
<tr>
<td><img src="http://209.123.166.68/E7CC71EB-756D-462F-9641B46BA6927E9B/pestlogo.jpg" alt="" width="100" height="125" border="0"></td>
<td>
<FONT SIZE="5">
Preferred Pest Services, Inc D/B/A Pest Pro Services
</FONT>
<BR>
32 Drysdale Street<BR>
Staten Island, NY, 10314<BR>
Tel:718 983-0004<BR>
Fax:718-477-0333 Email:pestprosolutions@gmail.com
<BR>
Sales Representative: Debbie
</td>
</tr>
</table>
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<DIV ALIGN="RIGHT">
<P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="95%">
<TR>
<TD><b>Order#:</b></TD>
<TD> 92681</TD>
</TR>
<TR>
<TD><b>JobDate:</b></TD>
<TD> <b>10/07/2011</b></TD>
</TR>
<TR>
<TD><b>Day of Week:</b></TD>
<TD> <b>Friday</b></TD>
</TR>
<TR>
<TD><b>Location:</b></TD>
<TD> Manhattan</TD>
</TR>
<TR>
<TD><b>Start Time:</b></TD>
<TD> 12:00 PM</TD>
</TR>
<TR>
<TD width="50%"><b>CFP:</b></TD>
<TD width="50%"> </TD>
</tr>
<tr>
<TD width="50%"><b>CN:</b></TD>
<TD width="50%"> </TD>
</TR>
<tr>
<TD width="50%"><b>Day Number:</b></TD>
<TD width="50%"> 1/1 </TD>
</TR>
</table>
</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="50%"><b>FOR OFFICE USE ONLY:</b></TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP"><B>CUSTOMER INFORMATION:</B><BR><BR>
Company: Lemle and Wolff<BR>
Christopher Anelante<BR>
Address: 5925 Broadway<BR>
Address: Bronx, NY 10463<BR>
Telephone: 718 884-7676 Fax: 718 884-5300<BR>
Email: <BR>
<TD WIDTH="50%" VALIGN="TOP"><B>Billing Address:</B><BR><BR>
Company: Lemle and Wolff<BR>
Christopher Anelante<BR>
Address: 5925 Broadway<BR>
Address: Bronx, NY 10463<BR>
</TD>
</TR>
<TR>
<TD WIDTH="50%"><b>JOB SITE:</b></TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2">
<b>JOB INFORMATION:</b><BR>
2651 Eighth Avenue<br>
New York, NY 10030<br>
Primary Contact: Eriberto Jacques 172*44*29419 Phone: 718 884-7676 Cell: Beeper:<br>
Notes:<BR>
JOB TYPE: Pest Control Services<BR>
<BR>
<BR>
</TD>
</TR>
<TR>
<TD COLSPAN="2"><B>Job Description:</B>
Pest Control Services-First Friday of the month 12:00 PM
</TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2"><B>Special Instructions:</B><BR>
Service to all of 10 apartments in building thorough treatment for mice roaches and insects. MUST LIST ALL APARTMENTS IN BUILDING ON LIST. TREAT all common areas and basements and common areas. MUST SEE SUPER FOR ACCESS</TD>
</TR>
<TR>
<TD COLSPAN="2"><b>ORDER TOTALS</b></TD>
</TR>
<TR>
<TD COLSPAN="2">Service Price: $30.00 Parts: $0.00 Subtotal: $30.00 Tax: $2.51 Total: $32.51</TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2"><B>Parts:</B><BR>
<table width="90%" border="1" cellspacing="0" cellpadding="0"><tr>
<TR>
<TD WIDTH="49%"><b>ItemID</b></TD>
<TD WIDTH="24%"><b>Description</b></TD>
<TD WIDTH="20%"><b>Qty</b></TD>
<TD WIDTH="20%"><b>Price</b></TD>
<TD WIDTH="20%"><b>Total</b></TD>
</TR>
</TD>
</tr>
</table>
</TR>
<TR>
<TD COLSPAN="2"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<DIV>
<P><FONT SIZE="2">Please sign that job was completed and performed in a <BR>
satisfactory manner.</FONT></P>
<P><FONT SIZE="2">Name:___________________________<BR><br>
Authorized Signature:_____________________________<BR><br>
Title:__________ Date:__________<BR><br>
</FONT>
</DIV>
<P><FONT SIZE="2">Job Completed: [ ]Yes [ ]No </FONT><FONT SIZE="1"></FONT>
</TD>
<TD WIDTH="50%" VALIGN="TOP"><FONT SIZE="2">Persons on the Job<BR><BR>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="74%">
<TR>
<TD WIDTH="49%"><FONT SIZE="2"><b>Name</b></FONT></TD>
<TD WIDTH="24%"><FONT SIZE="2"><b>Start Time</b></FONT></TD>
<TD WIDTH="20%"><FONT SIZE="2"><b>End Time</b></FONT></TD>
</TR>
<TR>
<TD WIDTH="49%">Carlos Almonte</TD>
<TD WIDTH="24%"> </TD>
<TD WIDTH="20%"> </TD>
</TR>
</TABLE>
<font size="-1"><br>Please use the back of this workorder for comments.</font></FONT></TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<!---<p style="page-break-after: always"></p>--->
<table Align="Center" width="85%">
<tr>
<td valign="Top">
<font size="+4"><div align="center"><b><u>WARNING!!</u></b></div></font>
<div align="center"><font size="+3">To all residents of:</font></div><br>
<font size="+3"><div align="center">2651 Eighth Avenue</div></font>
<br>
<div align="center"><font size="+4">Your stairhalls will be cleaned on:</font></div></font>
<br><br>
<font size="+3"><div align="center">Friday Oct-07/2011 12:00PM-06:11PM</div></font>
<br><br>
<font size="+4">
<b>DANGER TO ANYONE ATTEMPTING TO ENTER STAIRWAY !!!!</b>
<BR><BR>
<b>MUST USE CAUTION WHEN USING THESE STAIRCASES FOR THE NEXT 48 HOURS!</b>
</font>
<br><br>
<font size="+3"><p align="right">Thank You for your cooperation,<br>
The Management</p></font>
</td>
</tr>
</table>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<!--last modified on Tuesday, June 05, 2001 08:49 AM -->
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
<META NAME="GENERATOR" Content="Visual Page 2.0 for Windows">
<META NAME="Author" Content="NetCorrespondence.com">
<TITLE>Confirmation</TITLE>
</HEAD>
<BODY>
<P>
<TABLE BORDER="2" CELLPADDING="0" CELLSPACING="0" WIDTH="100%" HEIGHT="100%">
<TR>
<TD WIDTH="100%" VALIGN="TOP">
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD WIDTH="50%">
</TD>
<TD WIDTH="50%">
<P ALIGN="RIGHT"><font size="+1"><b>CONFIRMATION OF SERVICES<BR> for Pest Control Services</b></font>
</TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">
<table>
<tr>
<td align="left" valign="Top">
</td>
<td valign="top">
<FONT SIZE="5">Pest Pro Services</FONT><BR>
32 Drysdale Street<BR>
Staten Island NY 10314<BR>
Tel:718 983-0004<BR>
Fax:718-477-0333
<BR>
</td>
</tr>
<tr>
<td colspan="2">Sales Representative: Debbie</td>
</tr>
</table>
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<DIV ALIGN="RIGHT">
<P>
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="75%">
<TR>
<TD>Order#:</TD>
<TD> 92681</TD>
</TR>
<TR>
<TD>JobDate:</TD>
<TD> 10/07/2011</TD>
</TR>
<TR>
<TD>Location:</TD>
<TD> Manhattan</TD>
</TR>
<TR>
<TD>StartTime:</TD>
<TD> 12:00 PM</TD>
</TR>
</TABLE>
</DIV>
</TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP">Lemle and Wolff<BR>
Telephone: 718 884-7676 Fax: 718 884-5300<BR>
Billing Address: 5925 Broadway<br>
Address: Bronx, NY 10463<BR>
</TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD VALIGN="TOP" COLSPAN="2">
JOB TYPE: Pest Control Services<BR>
Attention: Eriberto Jacques 172*44*29419<BR>
Job Address: 2651 Eighth Avenue<BR>
Job City: New York
Borough or Town: Manhattan<BR>
<BR>
Site Manager/Super: Eriberto Jacques 172*44*29419 Tel: 718 884-7676
Beeper: Cell: Location
of Site/Mtc: Eriberto Jacques 172*44*29419<BR>
<BR>
</TD>
</TR>
<TR>
<TD WIDTH="50%"> </TD>
<TD WIDTH="50%"> </TD>
</TR>
<TR>
<TD WIDTH="50%" VALIGN="TOP"><BR>
Dear Customer,<br><br>
Thankyou for choosing us as your building maintenance company. Your building/s will be serviced on:<br>
<br>
<font size="+1"><b>Day:</b> Friday<br>
<b>Date:</b> Oct-072011<br>
<b>Start Time:</b> 12:00 PM<br></font>
<br>
Please post
any notices if applicable.
</TD>
<TD WIDTH="50%" VALIGN="TOP">
<B><FONT SIZE="2">SPECIAL INSTRUCTIONS:</FONT></B>
<br>
Service to all of 10 apartments in building thorough treatment for mice roaches and insects. MUST LIST ALL APARTMENTS IN BUILDING ON LIST. TREAT all common areas and basements and common areas. MUST SEE SUPER FOR ACCESS
<br>
<br>
<br>
<TABLE BORDER="1" CELLSPACING="1" WIDTH="80%">
<TR>
<TD WIDTH="67%"><FONT SIZE="2">Agreed Price:</FONT></TD>
<TD WIDTH="33%" Align="Right"><FONT SIZE="2">$30.00</FONT></TD>
</TR>
<TR>
<TD WIDTH="67%"><FONT SIZE="2">P.O. #:</FONT></TD>
<TD WIDTH="33%"></TD>
</TR>
</TABLE>
<br><br>
<b> All cancellations require at least 24 hours of notice to us
Failure to do so could result in extra charges.</b>
</TD>
</TR>
<TR>
<TD COLSPAN="2">
</TD>
</TR>
<TR>
<TD VALIGN="TOP">
Date Confirmed: <br>
Confirmed By:
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<!---<p style="page-break-after: always"></p>--->
1 個解決方案
解決方案1
1 2011-12-12 05:00:55
首先，為您的打印布局制作樣式表：
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print" />
關鍵是有media="print" 。
接下來，重置基本樣式，以使其跨瀏覽器標准化。 查看YUI3的CSS重置語法以獲得快速參考：http： //yuilibrary.com/yui/docs/cssreset/
從那里，您將要忽略人們討厭打印的視覺內容，例如徽標，圖形導航等：
#logo, .nav-tab, .etc {
display:none;
}
最后，設置分頁符，這樣您就不會在多個頁面上出現意外的內容拆分：
#some-important-element {
page-break-before: always;
}
設置完畢后，您將不必擔心跨瀏覽器的怪癖會干擾您的Web打印效果。
我們應該在設計網頁（html / css / javascript）中觀察到哪些基本提示與所有瀏覽器具有最高兼容性？
[英]what basic tips should we observe in design web pages(html/css/javascript) for having highest compatibility with all browsers?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.