ページで ASP.NET AJAX ModalPopupExtender を使用しています。ポップアップには、印刷する必要がある 1 つ以上の顧客注文の詳細が含まれています。各注文は別のページにある必要があります。
CSS スタイルを使用できるはずですが、ModalPopupExtender によって含まれているものが に設定されるためpage-break-after
、このシナリオでは機能しません。div
position: absolute
誰でも回避策を提案できますか?
完全を期すために、問題を説明する 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>Printing Pagination</title>
<style type="text/css">
div
{
padding: 10px;
margin: 10px;
}
div.outer
{
border: solid 5px green;
position: absolute;
top: 100px;
left: 100px;
width: 200px;
}
div.page
{
border: solid 5px red;
}
</style>
<style type="text/css" media="print">
div.outer
{
border: none;
}
div.page
{
page-break-after: always;
}
</style>
</head>
<body>
<div class="outer">
<div class="page">
This should be on page 1 when printed
</div>
<div class="page">
This should be on page 2 when printed
</div>
<div class="page">
This should be on page 3 when printed
</div>
</div>
</body>
</html>