IE で UI の印刷をサポートしようとしていますが、問題があります (Chrome は問題ありません)。
HTML は次のようになります。
tr {
height: 120px;
}
td div {
height: 18px;
width: 225px;
background-color: green;
position: absolute;
}
HTML
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Row1
<div></div>
</td>
</tr>
<tr>
<td>Row2
<div></div>
</td>
</tr>
<tr>
<td>Row3
<div></div>
</td>
</tr>
<tr>
<td>Row4
<div></div>
</td>
</tr>
<tr>
<td>Row5
<div></div>
</td>
</tr>
<tr>
<td>Row6
<div></div>
</td>
</tr>
<tr>
<td>Row7
<div></div>
</td>
</tr>
<tr>
<td>Row8
<div></div>
</td>
</tr>
<tr>
<td>Row9
<div></div>
</td>
</tr>
<tr>
<td>Row10
<div></div>
</td>
</tr>
<tr>
<td>Row11
<div></div>
</td>
</tr>
<tr>
<td>Row12
<div></div>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
上記は JSFiddle にもあります。
http://jsfiddle.net/52Qn7/2/show
これを印刷すると、2 ページに印刷されますが、「td」に配置された緑色の div は 2 ページ目に印刷されず、IE で 3 ページにプッシュされます。これは明らかに正しくありません!
IE での印刷のスクリーンショットは次のとおりです。
Chrome 経由で印刷する場合の印刷方法は次のとおりです。
何が問題なのか教えていただけますか？
編集：
1 つのテーブル行に 2 つのテーブルがあります。他のテーブルは正常に印刷されます。緑色の「div」の絶対位置を削除すると、すべてが正常に印刷されます。しかし、そのスタイルを削除すると、私のロジックは壊れます。