HTML 电子邮件未正确打印

Question

我编写了一封 HTML 电子邮件，旨在通过 PHP 发送给用户进行确认和公司地址，以便我们打印它以供记录。当我第一次开始时，如果订单足够大，它会打印所有内容，包括第二页，但现在当我得到第二页时，它只说有一页，并在 div 的中间将其切掉。我写的一个较旧的表格可以打印两页，所以我认为我的设置没有问题，我确保并检查了“打印所有页面”被选中。我在 Thunderbird 和 Outlook 以及几个电子邮件服务中都尝试过，但都没有成功。

这可能是页面布局方式的问题还是我可能忽略的缺少标签？我也包含了电子邮件代码。由于 gmail 缺乏对外部/内部样式表的支持，它对内联样式很重。我故意省略了一些基本的标签，例如身体和头部。

<div class="header">
    <div class="info" style="border: 1px black solid; border-radius: 20px; display: inline-block; font-family: Arial; font-weight:bold; color:black; width: 100%; padding: 0 7.5px;">
        <div class="left" style="float: left; clear: right; display: inline-block; font-size: 3em;">HD ' . ucfirst($_SESSION['sname']) . '</div>
        <div class="right" style="float: right; clear: right; display: inline-block; font-size: 3em;">' . $_SESSION['sdate'] .'</div>
        <div class="right" style="float: right; clear: left; display: inline-block; font-size: 1.53125em;">Placed by: ' . $_SESSION['name'] .'</div>
        <div class="left" style="float: left; clear: left; display: inline-block; font-size: 2.5em;">#' . $_SESSION['snumber'] . '</div>
        <div class="right" style="float: right; clear: right; display: inline-block; font-size: 1.53125em;">Pay by Scan</div>
    </div>

    <div class="instructions" style="border: 1px black solid; border-radius: 20px;">
        <div>Special Instructions: ' . $_SESSION['sinstruct'] .'</div>
    </div>
</div>

<div class="row" style="max-width: 612px; clear:both; font-size:12px; display: inline-block;">

    <div class="left" style="float: left; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px;border-radius: 20px;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">3.5" Herbs</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; margin-right:5px; text-align:left;">' . $herb1_mail . '</div>
        <div class="second" style="float: right; margin-left:15px;">' . $herb1_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px;">Total: ' . $_SESSION['total_1'] . '</div>

    </div>

    <div class="right" style="float: left; clear:right; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px;border-radius: 20px; display:inline;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">Qrt Herbs</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; margin-right:5px; text-align:left;">' . $herb2_mail . '</div>
        <div class="second" style="float: right; margin-left:25px;">' . $herb2_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px;">Total: ' . $_SESSION['total_2'] . '</div>
    </div>

</div>

<div class="row" style="max-width: 612px; clear:both; font-size:12px; display: inline-block;">

    <div class="left" style="float: left; clear: left; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px;border-radius: 20px;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">Pak Veggies</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; margin-right:5px; text-align:left;">' . $veg1_mail . '</div>
        <div class="second" style="float: right; clear:right; margin-left:25px;">' . $veg1_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px; display: inline-block;">Total: ' . $_SESSION['total_3'] . '</div>
    </div>

    <div class="right" style="float: left; clear:right; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px; border-radius: 20px; display:inline;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">4" Veggies</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; margin-right:5px; text-align:left;">' . $veg2_mail . '</div>
        <div class="second" style="float: right; margin-left:25px;">' . $veg2_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px;">Total: ' . $_SESSION['total_4'] . '</div>
    </div>

</div>

<div class="row" style="max-width: 612px; clear:both; font-size:12px; display: inline-block;">

    <div class="left" style="float: left; clear: left; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px; border-radius: 20px;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">Gal Veggies</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; margin-right:5px; text-align:left;">' . $veg3_mail . '</div>
        <div class="second" style="float: right; margin-left:25px;">' . $veg3_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px;">Total: ' . $_SESSION['total_5'] . '</div>
    </div>

    <div class="right" style="float: left; clear:right; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px; border-radius: 20px; display:inline;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">Gal Herbs</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; margin-right: 5px; text-align:left;">' . $herb3_mail . '</div>
        <div class="second" style="float: right; margin-left:25px;">' . $herb3_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px;">Total: ' . $_SESSION['total_6'] . '</div>
    </div>

</div>

<div class="row" style="max-width:612px;clear:both; font-size:12px; display: inline-block;">

    <div class="left" style="float: left; clear: right; margin: 7.5px; padding:15px; border: 1px black solid; max-width: 300px; border-radius: 20px;">
        <h4 style="padding:0; margin:0; float: left; clear: right;">2 Gal Veggies</h4><h4 style="padding:0; margin:0; top:0; right:25px; display:inline-block;float: right;">Qty</h4><br/>
        <div class="first" style="float: left; text-align:left;">' . $veg4_mail . '</div>
        <div class="second" style=" float: right; margin-left:25px;">' . $veg4_quant . '</div>
        <div class="second" style="clear: both; float: right; margin-left:15px;">Total: ' . $_SESSION['total_7'] . '</div>
    </div>

</div>

Answer 1

根据我使用 Outlook 的经验（可能因客户端/操作系统而异），打印页面会尽可能地中断。这由您的打印机/页面设置控制。然后它会在超过最大页面高度的第一个位置破坏您的电子邮件。

它可能会在 2 个表格之间选择一个部分，但强制它不在某个位置中断的唯一方法是使用高度跨越该部分的图像。