我试图打印多种文档格式,但由于某些原因,Firefox的格式在第一页之外就混乱了。我有浮动元素,它们在第一页正确对齐,但在打印预览的第二页中断。我把代码贴在了js和下面。如果您将代码复制到本地机器,您可以尝试一下,看看我的意思。它在Chrome, ie10, ie9和safari上运行良好。不幸的是,Firefox不行。我想知道这是Firefox的bug吗?我可以用一张桌子来解决这个问题,但我不想这样做。非常感谢你的帮助。
http://jsfiddle.net/2xpDP/1/ .hide { display: none; }
.left { float: left; }
.right { float: right; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.clear { clear: both; }
.align-top { vertical-align: top; }
div.page { margin: 0 auto; width: 720px; font-family: Helvetica; font-size: 12px;}
.invoice h2 { color: #ccc; }
.invoice-header-top { border-bottom: 2px solid #ccc; padding-bottom: 10px; }
.invoice-header-top img { width: 300px; height: 125px; }
.invoice-header-top .formatType { width: 239px; margin-left: 40px; text-align: left; }
@media print {
div.page {page-break-after: always;}
}
<div class="page clear clearfix">
<div class="invoice clear clearfix">
<div class="invoice-header-top clear clearfix">
<div class="left">
<img src=" http://placehold.it/350x150"></div>
<div class="left formatType">
<h2>INVOICE
</h2>
</div>
<div class="right text-left">
<b>Test Data</b>
<br>
Test Data<br>
Test Data<br>
Test Data<br>
Test Data</div>
</div>
</div>
</div>
<div class="page clearfix clear">
<div class="invoice clearfix clear">
<div class="invoice-header-top clear clearfix">
<div class="left">
<img src=" http://placehold.it/350x150"></div>
<div class="left formatType">
<h2>INVOICE
</h2>
</div>
<div class="right text-left company-info">
<b>Test Data</b><br>
Test Data<br>
Test Data<br>
Test Data<br>
Test Data</div>
</div>
</div>
</div>
这是因为您的伪元素的content属性为空。在这些引号中添加任何东西(除了点击空格键),你会看到你的div在FF(打印视图)中正确对齐。
IE<8不支持:before和:after,所以如果你想让这个打印在所有浏览器中都一样,我会去掉它们。好运!