3

あなたの助けが必要です、

Internet Explorer 11 で印刷プレビューを実行すると、div (下の境界線) が次のページに分割される理由がわかりません。

いずれにせよ、適切に、または別の方法で行うことができれば、理想的には、ページの周りに 1 ピクセルの境界線 (レターサイズ、8.5 インチ x 11.0 インチ) をいくつかの余白を付けて配置したいと考えています。

ここに画像の説明を入力 ここに画像の説明を入力

問題の HTML および CSS マークアップは次のとおりです。

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
@page {
    margin: 0.25in;
}
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.table td {
    padding: 0;
}
</style>

</head>

<body>


<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
    <tr>
        <td>File Number:</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>


</body>

</html>
4

1 に答える 1

2

問題は、CSS ボックス モデルに関係しています。デフォルトでは、ボーダーは幅/高さの外側に追加されるため、ボックスのサイズをボーダー ボックスに変更する必要があります。これにより、ボーダーが幅/高さの内側に配置されます。

<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...

これを border-box に変更しないと、div の高さが 100% + 2 ピクセル (上の境界線が 1 ピクセル、下の境界線が 1 ピクセル) になり、2 ページ目にオーバーフローが発生します。

于 2016-05-10T18:46:01.760 に答える