I'm having trouble getting this working in most browsers, except for IE (it even works correctly in IE6) and Opera.
Firefox separates the divs correctly but only prints the first page.
Chrome and Safari only applies the page break to the last div.
How can I get this working across all browsers correctly?
The HTML:
<div id="leftNav">
<ul>
<!--links etc-->
</ul>
</div>
<div id="mainBody">
<div id="container">
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
<div class="pageBreak">
<!--content-->
</div>
</div>
</div>
The divs with the IDs #leftNav
and #mainBody
are are set to float:left
, so they display nicely.
I only want to print the .pageBreak
classes, hiding the #leftNav
and the rest of the #mainBody
with CSS.
The CSS:
@media print
{
#leftNav
{
display:none;
}
#mainBody
{
border:none;
margin:none;
padding:none;
}
}
Question&Answers:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…