css - 单元格填充在 Gmail 中准确，但在 Microsoft Outlook 中不准确

Question

我有一封由我们公司的电子邮件客户端 microsoft outlook 接收的 php 电子邮件。我也在我的 gmail 中得到一份副本。 gmail 中的一切看起来都很好:

这个 php/html:

$remainder = <<<EOD

<tr>
    <td colspan='2' style='font-size:12pt; padding:5px 0px 5px 3px; background-color:#F7F7F7;'>
    Product details
    </td>
</td>


<tr>
    <td style="width:150px;font-size:10pt; padding:10px 8px 0px 3px;" align="left">
        Product type:
    </td>

    <td style='font-size:10pt; padding:10px 0px 0px 0px;'>
        {$product}
    </td>
</tr>


<tr>
    <td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
        Quantity:
    </td>

    <td style='font-size:10pt; padding:10px 0px 0px 0px;'>
        {$qty}
    </td>
</tr>       



<tr>
    <td style='width:150px;font-size:10pt; padding:10px 8px 0px 3px;' align="left">
        Product size:
    </td>

    <td style='font-size:10pt; padding:10px 0px 0px 0px;'>
        {$productSize}
    </td>
</tr>



<tr>
    <td style='width:150px;font-size:10pt; padding:30px 8px 0px 3px;' align="left">
        Account executive:
    </td>

    <td style='font-size:10pt; padding:30px 0px 0px 0px;'>
        {$accountExec}
    </td>
</tr>

在 gmail 中生成如下所示的内容:(减去顶部我没有裁剪的部分)

但是，在 microsoft outlook 中，我得到了类似这样的东西(有很多夸大的填充。

通过查看浏览器中的元素(当我将元素从 msOutlook 转发回 gmail 时)，我可以看到正在添加几个不同的元素。为什么会这样？有什么办法可以预防吗？

我怎样才能使它在两者中看起来都正确？

谢谢!

Answer 1

我建议将每个表格单元格的内容包装在一个 div 中，并为该 div 而不是 td 提供填充