我正在使用CSS打印样式表在打印时为页面元素提供替代样式,并隐藏我们不希望打印的样式。
当在浏览器中预览页面(使用IE8测试)时,它会溢出到第二页,即使所有元素看起来都适合单个页面 - 请参阅screenshots。
打印样式表中需要更改哪些内容以防止出现这种情况并将页面保留为单个打印页面?我尝试将display:none设置为最底部的面板,但页面仍然分为两部分。
另外,如何防止在页面周围显示边框和页码?
CSS样式表
/* Specify class for items that should not print */
.noprint
{
display: none;
}
/* Ensure the content spans the full width */
.fullwidth
{
width: 100%; margin: 0; float: none;
}
/* PRINT STYLES FOR ELEMENTS */
.newscript
{
position: absolute;
float: none;
margin: 0pt auto;
clear: both;
/* background-image: url( '../_images/blank_rx.jpg' ); */
width: 433pt;
height: 400pt;
/* height: 550pt; */
/* position: relative; */
font-family: "Times New Roman";
}
.script2, #patientdetails
{
position: absolute;
float: none;
color: #3A5A85;
font-family: "Times New Roman";
font-weight: bold;
}
.newscript .doctor
{
position: absolute;
float: none;
left: 10pt;
top: 10pt;
width: 400pt;
height: 80pt;
text-align: center;
color: #3A5A85;
font-family: "Times New Roman";
font-size: 24pt;
font-weight: bold;
}
.newscript .hr1
{
position: absolute;
float: none;
left: 5pt;
top: 120pt;
height: 3pt;
width: 450pt;
color: #0a0a0a;
}
.newscript .patientnameLbl
{
position: absolute;
float: none;
color: #000000;
left: 18pt;
top:125pt;
font-size: 24pt;
}
.newscript .patientname
{
position: absolute;
float: none;
left: 24pt;
top: 150pt;
font-size: 24pt;
}
.newscript .DOBLbl
{
position: absolute;
float: none;
color: #000000;
left: 350pt;
top: 125pt;
font-size: 24pt;
}
.newscript .dob
{
position: absolute;
float: none;
left: 350pt;
top: 150pt;
font-size: 24pt;
}
.newscript .hr2
{
position: absolute;
float: none;
left: 5pt;
top: 180pt;
height: 3pt;
width: 450pt;
color: #0a0a0a;
}
.newscript .addressLbl
{
position: absolute;
float: none;
color: #000000;
left: 18pt;
top: 190pt;
font-size: 24pt;
}
.newscript .address
{
position: absolute;
float: none;
left: 24pt;
top: 220pt;
font-size: 24pt;
}
.newscript .dateLbl
{
position: absolute;
float: none;
color: #000000;
left: 352pt;
top: 190pt;
font-size: 24pt;
}
.newscript .currentDate
{
position: absolute;
float: none;
left: 352pt;
top: 220pt;
border-bottom: dotted 1pt #000000;
font-size: 24pt;
}
.newscript .hr3
{
position: absolute;
float: none;
left: 5pt;
top: 304pt;
height: 3pt;
width: 450pt;
color: #0a0a0a;
}
.newscript .rxlogo
{
position: absolute;
float: none;
left: 18pt;
top: 314pt;
width: 28pt;
height: 33pt;
}
.newscript .lbldrugname
{
position: absolute;
float: none;
left: 75pt;
top: 314pt;
width: 100%;
/* height: 20pt; */
/* font-family: "Times New Roman"; */
font-size: 24pt;
text-align: left;
}
.newscript .drugname
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 340pt;
/* height: 30pt; */
/* width: 310pt; */
font-size: 24pt;
border: solid 0pt #ccc;
background-color: #ffffff;
}
.newscript .lblstrength
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 370pt;
/* width: 360pt; */
/* height: 20pt; */
font-size: 24pt;
text-align: left;
}
.newscript .strength
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 395pt;
/* height: 20pt; */
/* width: 310pt; */
font-size: 24pt;
border: solid 0pt #ccc;
background-color: #ffffff;
}
.newscript .lbldForm
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 430pt;
/* width: 100pt;
height: 20pt; */
font-size: 24pt;
text-align: left;
}
.newscript .dForm
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 460pt;
/* height: 20pt;
width: 125pt; */
font-size: 24pt;
border: solid 0pt #ccc;
background-color: #ffffff;
}
.newscript .lblQuantity
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 490pt;
/* width: 100pt;
height: 20pt; */
font-size: 24pt;
text-align: left;
}
.newscript .Quantity
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 520pt;
/* height: 20pt;
width: 75pt; */
font-size: 24pt;
border: solid 0pt #ccc;
background-color: #ffffff;
}
.newscript .lblDaysSupply
{
/* 75 225 */
position: absolute;
float: none;
left: 75pt;
top: 550pt;
width: 100%;
/* height: 20pt; */
font-size: 24pt;
text-align: left;
}
.newscript .DaysSupply
{
/* 75 225 */
position: absolute;
left: 75pt;
top: 580pt;
/* height: 20pt; */
/* width: 100%; */
font-size: 24pt;
border: solid 0pt #ccc;
background-color: #ffffff;
float: none;
}
.newscript .lblSig
{
/* 75 225 */
position: absolute;
float: none;
left: 15pt;
top: 610pt;
width: 100pt;
height: 20pt;
font-size: 24pt;
text-align: left;
}
.newscript .Sig
{
/* 75 225 */
position: absolute;
float: none;
left: 15pt;
top: 640pt;
width: 450pt;
height: 80pt;
font-size: 24pt;
border: solid 1pt #ccc;
background-color: #ffffff;
}
.newscript .hr4
{
position: absolute;
float: none;
left: 5pt;
top: 720pt;
height: 3pt;
width: 450pt;
color: #0a0a0a;
}
.newscript .txtDaw
{
position: absolute;
float: none;
left: 80pt;
top: 730pt;
font-size: 12pt;
text-align: center;
}
.newscript .lblrefills
{
position: absolute;
float: none;
left: 15pt;
top: 765pt;
font-size: 24pt;
}
.newscript .refillnum
{
position: absolute;
float: none;
left: 100pt;
top: 765pt;
/* width: 35pt;
height: 20pt; */
font-size: 24pt;
text-align: center;
vertical-align: middle;
border: solid 0pt #ccc;
background-color: #ffffff;
}
.newscript .daw
{
position: absolute;
float: none;
left: 185pt;
top: 800pt;
width: 60pt;
height: 30pt;
font-size: 24pt;
text-align: center;
vertical-align: middle;
border: solid 1pt #ccc;
background-color: #ffffff;
}
.newscript .lblDaw
{
position: absolute;
float: none;
left: 100pt;
top: 840pt;
font-size: 24pt;
text-align: center;
}
ASPX页面
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site1.Master" CodeFile="print_newrx.aspx.cs" Inherits="RxVue.print_newrx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="_css/newrx.css" />
<link rel="stylesheet" type="text/css" href="_css/print_rx.css" media="print" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="server">
<form id="form1" runat="server">
<asp:Panel ID="newscript" runat="server" CssClass="newscript fullwidth">
<asp:Panel ID="doctor" runat="server" CssClass="doctor fullwidth">
<asp:Literal ID="docDetails" runat="server"></asp:Literal>
</asp:Panel>
<asp:Panel ID="patientinfo" runat="server" CssClass="patientinfo fullwidth">
<asp:Literal ID="patientDetails" runat="server"></asp:Literal>
<asp:Panel ID="script2" runat="server">
<asp:Label ID="lblDrugName" runat="server" Text="Drug Name" CssClass="lbldrugname"></asp:Label>
<br />
<asp:Label ID="lblstrengthAndUM" runat="server" Text="Strength:" CssClass="lblstrength"></asp:Label>
<br />
<asp:Label ID="lblForm" runat="server" Text="Form:" CssClass="lbldForm"></asp:Label>
<br />
<asp:Label ID="lblQuantity" runat="server" Text="Quantity:" CssClass="lblQuantity"></asp:Label>
<asp:TextBox ID="frmquantity" runat="server" CssClass="Quantity"></asp:TextBox>
<br />
<asp:Label ID="lblDaysSupply" runat="server" Text="Days Supply:" CssClass="lblDaysSupply"></asp:Label>
<asp:Label ID="lblSig" runat="server" Text="Sig:" CssClass="lblSig"></asp:Label>
<br />
<hr class='hr4'/>
<div class="txtDaw">THIS PRESCRIPTION WILL BE FILLED GENERICALLY<br />UNLESS THE PRESCRIBER WRITES 'd a w' IN THE BOX BELOW </div>
<asp:Label ID="lblrefills" runat="server" Text="Refills:" CssClass="lblrefills"></asp:Label>
<br />
<div class="lblDaw">DISPENSE AS WRITTEN</div>
</asp:Panel>
</asp:Panel>
</asp:Panel>
<asp:Panel ID="newscriptbottom" runat="server" CssClass="newscriptbottom noprint">
<asp:Button ID="btnCancelNew" runat="server" Text="Back" CssClass="btn_newScript noprint" OnClick="btnCancelNew_Click" CausesValidation="false" />
<asp:Button ID="btnPrint" runat="server" Text="Print" CssClass="btn_newScript noprint" CausesValidation="false" OnClientClick="window.print();"/>
</asp:Panel>
</form>
</asp:Content>
使用正文标记
呈现HTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
RxVue
</title><link rel="stylesheet" type="text/css" href="_css/main.css" />
<!-- <link rel="stylesheet" type="text/css" href="_css/newrx.css" />
<link rel="stylesheet" type="text/css" href="_css/print_rx.css" media="print" />
-->
<link rel="stylesheet" type="text/css" href="_css/print_rx.css" />
<!--[if IE]>
<style>
fieldset {
position: relative;
}
legend {
position: absolute;
top: -.5em;
left: .2em;
}
</style>
<![endif]-->
<script type="text/javascript" language="javascript">
</script>
</head>
<body>
<div id="mainwrap">
<div id="wrap" class="clearfix">
<div id="header" class="noprint">
<!--<h1>RxVue v2.0</h1><img src="images\title.jpg"-->
</div>
<div id="topnav" class="noprint">
<div id="ctl00_buttons">
<div id="ctl00_nousers">
<ul>
<li><a href="Patient.aspx">Search Patients</a></li>
<li id="favs"><a href="favorites.aspx">Favorites</a></li>
<li style="float:right"><a href="help.aspx">Help</a></li>
<li style="float:right"><a href="SessEnd.aspx">Log Off</a></li>
</ul>
</div>
</div>
</div>
<div id="main" class="fullwidth">
<form name="aspnetForm" method="post" action="print_newrx.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTkwMTE2OTYzOQ8WCB4GUmVmVXJsBSNodHRwOi8vbG9jYWxob3N0L1J4VnVlL3BhdGllbnQuYXNweB4OX2N1cnJlbnRTY3JpcHQy6QMAAQAAAP////8BAAAAAAAAAAwCAAAAQkRhdGFPYmplY3RzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAKU9wdXNJU00uUHJvZHVjdHMuUnhWdWUuRGF0YU9iamVjdHMuU2NyaXB0EQAAAAhTY3JpcHRJRAZzaXRlSUQIZG9jdG9ySUQJcGF0aWVudElEBG5hbWUIY2F0ZWdvcnkNc3RyZW5ndGhBbmRVTQRmb3JtA3NpZwhxdWFudGl0eQdyZWZpbGxzDHJlZmlsbE51bWJlcghyeE51bWJlcgpkYXlzU3VwcGx5B2Rhd0NvZGULZGF0ZVdyaXR0ZW4NZGF0ZU9mU2VydmljZQAAAAABAQEBAQAAAAEAAQMDCAgICAYICAgPU3lzdGVtLkRhdGVUaW1lD1N5c3RlbS5EYXRlVGltZQIAAADO3QQAAQAAAC8AAACwFQAABgMAAAAJSUJVUFJPRkVOBgQAAAAABgUAAAAFNDAwTUcGBgAAAANUQUIGBwAAAAkKMSBEQUlMWSAAAAAAAAAkQGMAAAAAAAAABggAAAAGODE1NDY4CgAAAAYJAAAAATAIDQAAXWKHqMsICA0AAF1ih6jLCAseDl9jdXJyZW50RG9jdG9yMrMDAAEAAAD/////AQAAAAAAAAAMAgAAAEJEYXRhT2JqZWN0cywgVmVyc2lvbj0xLjAuMC4wLCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPW51bGwFAQAAAClPcHVzSVNNLlByb2R1Y3RzLlJ4VnVlLkRhdGFPYmplY3RzLkRvY3RvchEAAAAGc2l0ZUlECGRvY3RvcklECWZpcnN0TmFtZQhsYXN0TmFtZQhhZGRyZXNzMQhhZGRyZXNzMgRjaXR5BXN0YXRlB3ppcGNvZGUGaG9zdElECXdvcmtQaG9uZQNkZWEFbm90ZXMMc3RhdGVMaWNlbnNlBHVQaW4JZmF4TnVtYmVyA05QSQAAAQEBAQEBAQEBAQEBAQEBCAgCAAAAAQAAADgJAAAGAwAAAAAGBAAAAAVHT1lBTAkDAAAACgYGAAAACEVMTVNGT1JEBgcAAAACTlkGCAAAAAUxMDUyMwYJAAAABDIzNTMGCgAAAA0oOTE0KTY4MS0yMDI4BgsAAAAJQkc1MDk3NDY0CQMAAAAGDQAAAAYyMDM0MzQJAwAAAAkDAAAACQMAAAALHg9fY3VycmVudFBhdGllbnQymgYAAQAAAP////8BAAAAAAAAAAwCAAAAQkRhdGFPYmplY3RzLCBWZXJzaW9uPTEuMC4wLjAsIEN1bHR1cmU9bmV1dHJhbCwgUHVibGljS2V5VG9rZW49bnVsbAUBAAAAKk9wdXNJU00uUHJvZHVjdHMuUnhWdWUuRGF0YU9iamVjdHMuUGF0aWVudBsAAAAJcGF0aWVudElEDGhvc3RVbmlxdWVJRAZzaXRlSUQJZmlyc3ROYW1lCGxhc3ROYW1lBGNpdHkFc3RhdGUHemlwQ29kZQhhZGRyZXNzMQhhZGRyZXNzMgtkYXRlT2ZCaXJ0aA1oYXNTYWZldHlDYXBzA3NleBFhbHRlcm5hdGVMYW5ndWFnZQlob21lUGhvbmUJd29ya1Bob25lCmZhY2lsaXR5SUQMZmFjaWxpdHlOYW1lFGZhY2lsaXR5QWRtaXR0ZWREYXRlFWZhY2lsaXR5UGF0aWVudE51bWJlchBmYWNpbGl0eUJ1aWxkaW5nDWZhY2lsaXR5Rmxvb3INZmFjaWxpdHlOdXJzZQxmYWNpbGl0eVJvb20LZmFjaWxpdHlCZWQScHJpbWFyeVBoeXNpY2lhbklEFHByaW1hcnlQaHlzaWNpYW5OYW1lAwMAAQEBAQEBAQMAAQEBAQMBAwEBAQEBAQMBDFN5c3RlbS5JbnQzMgxTeXN0ZW0uSW50MzIID1N5c3RlbS5EYXRlVGltZQEMU3lzdGVtLkludDMyD1N5c3RlbS5EYXRlVGltZQxTeXN0ZW0uSW50MzICAAAACAiwFQAACAgkTgAAAQAAAAYDAAAABE9QVVMGBAAAAARURVNUBgUAAAAKS0lOR1MgUEFSSwYGAAAAAk5ZBgcAAAAFMTE3NTQGCAAAAAoyIFNNSVRIIExOCggNAMABJL1QmggBBgkAAAABTQoGCgAAAA0oOTk5KTk5OS05OTk5BgsAAAAACAgzAAAABgwAAAANVEVTVCBGQUNJTElUWQgNAMBdCG7ewAgGDQAAAAEwCgYOAAAAATAJCwAAAAkLAAAACQsAAAAICPEOAAAKCxYCZg9kFgQCAw9kFgICAQ8PFgIeB1Zpc2libGVnZGQCBQ9kFgICAQ9kFgICAQ9kFgQCAQ9kFgICAQ8WAh4EVGV4dAU5IEdPWUFMPGJyLz48YnIvPjxici8+RUxNU0ZPUkQsIE5ZIDEwNTIzPGJyLz4oOTE0KTY4MS0yMDI4ZAIDD2QWAgIBDxYCHwUF5AU8ZGl2IGlkPSdwYXRpZW50ZGV0YWlscyc+PGhyIGNsYXNzPSdocjEnLz48ZGl2IGNsYXNzPSdwYXRpZW50bmFtZUxibCc+UGF0aWVudCdzIE5hbWU8L2Rpdj48ZGl2IGNsYXNzPSdwYXRpZW50bmFtZSc+VEVTVCwgT1BVUzwvZGl2PjxociBjbGFzcz0naHIyJy8+PGRpdiBjbGFzcz0nYWRkcmVzc0xibCc+QWRkcmVzczwvZGl2PjxkaXYgY2xhc3M9J2FkZHJlc3MnPjIgU01JVEggTE48YnIvPktJTkdTIFBBUksgTlkgMTE3NTQ8YnIvPkhvbWU6ICg5OTkpOTk5LTk5OTkgV29yazogPC9kaXY+PGRpdiBjbGFzcz0nZGF0ZUxibCc+RGF0ZTwvZGl2PjxkaXYgY2xhc3M9J2N1cnJlbnREYXRlJz43LzE0LzIwMTE8L2Rpdj48ZGl2IGNsYXNzPSdET0JMYmwnPkRPQjwvZGl2PjxkaXYgY2xhc3M9J2RvYic+NS8xOC8xOTY1PC9kaXY+PGhyIGNsYXNzPSdocjMnLz48ZGl2IGNsYXNzPSdyeGxvZ28nPjxpbWcgc3JjPSdfaW1hZ2VzL25ld3J4X3J4bG9nby5naWYnLz48L2Rpdj48ZGl2IGNsYXNzPSdkcnVnbmFtZSc+SUJVUFJPRkVOPC9kaXY+PGRpdiBjbGFzcz0nc3RyZW5ndGgnPjQwME1HPC9kaXY+PGRpdiBjbGFzcz0nZEZvcm0nPlRBQjwvZGl2PjxkaXYgY2xhc3M9J1F1YW50aXR5Jz4xMDwvZGl2PjxkaXYgY2xhc3M9J0RheXNTdXBwbHknPjEwPC9kaXY+PGRpdiBjbGFzcz0nU2lnJz4KMSBEQUlMWSA8L2Rpdj48ZGl2IGNsYXNzPSdyZWZpbGxudW0nPjA8L2Rpdj48ZGl2IGNsYXNzPSdkYXcnPjwvZGl2PjwvZGl2PmRk7RV36BiJjbbovj1XnUym6MEOcXOJIKiWRJUuDtYd6VM=" />
</div>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKXxtXKAgL9pNLfAwL+95vYCQKrtLS2BiSIbnbb9KvUH1ZSdz1FkSgkv3bVd6X5jUkQVgpkQliz" />
</div>
<div id="ctl00_mainContent_newscript" class="newscript fullwidth">
<div id="ctl00_mainContent_doctor" class="doctor fullwidth">
GOYAL<br/><br/><br/>ELMSFORD, NY 10523<br/>(914)681-2028
</div>
<div id="ctl00_mainContent_patientinfo" class="patientinfo fullwidth">
<div id='patientdetails'><hr class='hr1'/><div class='patientnameLbl'>Patient's Name</div><div class='patientname'>TEST, OPUS</div><hr class='hr2'/><div class='addressLbl'>Address</div><div class='address'>2 SMITH LN<br/>KINGS PARK NY 11754<br/>Home: (999)999-9999 Work: </div><div class='dateLbl'>Date</div><div class='currentDate'>7/14/2011</div><div class='DOBLbl'>DOB</div><div class='dob'>5/18/1965</div><hr class='hr3'/><div class='rxlogo'><img src='_images/newrx_rxlogo.gif'/></div><div class='drugname'>IBUPROFEN</div><div class='strength'>400MG</div><div class='dForm'>TAB</div><div class='Quantity'>10</div><div class='DaysSupply'>10</div><div class='Sig'>
1 DAILY </div><div class='refillnum'>0</div><div class='daw'></div></div>
<div id="ctl00_mainContent_script2">
<span id="ctl00_mainContent_lblDrugName" class="lbldrugname">Drug Name</span>
<br />
<span id="ctl00_mainContent_lblstrengthAndUM" class="lblstrength">Strength:</span>
<br />
<span id="ctl00_mainContent_lblForm" class="lbldForm">Form:</span>
<br />
<span id="ctl00_mainContent_lblQuantity" class="lblQuantity">Quantity:</span>
<input name="ctl00$mainContent$frmquantity" type="text" id="ctl00_mainContent_frmquantity" class="Quantity" />
<br />
<span id="ctl00_mainContent_lblDaysSupply" class="lblDaysSupply">Days Supply:</span>
<span id="ctl00_mainContent_lblSig" class="lblSig">Sig:</span>
<br />
<hr class='hr4'/>
<div class="txtDaw">THIS PRESCRIPTION WILL BE FILLED GENERICALLY<br />UNLESS THE PRESCRIBER WRITES 'd a w' IN THE BOX BELOW </div>
<span id="ctl00_mainContent_lblrefills" class="lblrefills">Refills:</span>
<br />
<div class="lblDaw">DISPENSE AS WRITTEN</div>
</div>
</div>
</div>
<div id="ctl00_mainContent_newscriptbottom" class="newscriptbottom noprint">
<input type="submit" name="ctl00$mainContent$btnCancelNew" value="Back" id="ctl00_mainContent_btnCancelNew" class="btn_newScript noprint" />
<input type="submit" name="ctl00$mainContent$btnPrint" value="Print" onclick="window.print();" id="ctl00_mainContent_btnPrint" class="btn_newScript noprint" />
</div>
</form>
</div>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">
<span class="image">
<img src="_images/poweredby.gif" alt="Powered By WebRx"/></span>
</div>
</body>
</html>
谢谢。
答案 0 :(得分:2)
尝试将样式float:left
添加到您拥有所有数据的主表中。
答案 1 :(得分:1)
尝试重置正文或文档上的默认边距/填充。
body {
margin: 0;
padding: 0;
}
答案 2 :(得分:1)
样式表中有大量带position:absolute;
的元素。
IE7&amp; 8倾向于阻止打印模式的人。
尝试正常定位您的内容,看看是否能解决问题。
答案 3 :(得分:1)
内容包含在divs层次结构中的aspx页面上的patientDetails文字中。标签按顺序跟随patientDetails文字,我必须继续使用position:absolute,以便将每个标签的每个div定位在每个相应的内容div旁边。它在IE8和其他浏览器中显示正常。
至于2页打印问题 - 减小尺寸没有帮助...但是我发现是什么导致它打破另一页 - 层次结构中的另一个样式表定义了带有1px边框的#mainwrap。在打印样式表中将边框值覆盖为0px不再在第二页上显示边框并将打印输出保留为一页。