0

我正在处理电子邮件 HTML 模板，并向我的 gmail 帐户发送了一个测试。我指定了每个<td>元素的宽度，并确保<td>一行中的所有宽度加起来与表格宽度一致。但在我看来，gmail总是为td我指定的宽度添加或删除一些十进制数，这导致表格宽度和整体宽度之间有点不匹配td。而且这种不匹配会在表格的边框和最后一行之间显示一个小间隙td，这对我来说有点烦人。有谁知道如何解决这个问题？

实际上这种不匹配只发生在 gmail 中。Hotmail 和雅虎没有这个问题。

代码如下：（里面有一些汉字，你可以忽略它们）

<table width="650" cellpadding="0" cellspacing="0" style="border: 10px solid black;">
    <tr>
        <td style="width: 18px; font-size: 30px; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif;">
            <img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />    
        </td>
        <td width="297" style="vertical-align: top;">
         <table width='297' cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="2" height="175" style="width: 297px; height: 175px; line-height: 175px; max-height: 175px;">
                    <img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />       
                </td>
            </tr>
            <tr>
                <td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
                    让&lt;span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; font-weight: bold;">Bomoda</span>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 24px; color: #000001; font-weight: bold; text-align: left; line-height: normal;">
                                        </td>
            </tr>
            <tr>
                <td colspan="2" height="31" style="width: 297px; height: 31px; line-height: 31px; max-height: 31px;">
                    <img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />       
                </td>
            </tr>
            <tr>
                <td colspan="2" style="font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; color: #000001; text-align: left; line-height: normal;">
                    <a href="http://www.bomoda.com" target="_blank" style="text-decoration: none;"><span style="color: #00bac9; font-family: Helvetica, Arial, 'Microsoft Yahei', sans-serif; font-size: 14px; ">Bomoda</span></a>Newsletter
                </td>
            </tr>
            <tr>
                <td colspan="2" height="36" style="width: 297px; height: 36px; line-height: 36px; max-height: 36px;">
                    <img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />       
                </td>
            </tr>
            <tr>
                <td width="116">
                    <a href="http://www.bomoda.com" target="_blank" style="display: block; text-decoration: none;">
                        <img border="0" src="http://m.bomoda.com/static/img/email/retention_email/button.jpg" alt="" style="display: block; width: 116px; height: 27px;" />
                    </a>
                </td>
                <td width="181">
                    <img border="0" src="http://m.bomoda.com/static/img/email/spacer.gif" style="display:block;" />    
                </td>
            </tr>       
         </table>    
        </td>
        <td width="315">
            <img border="0" alt="Bomoda" style="display: block; width: 315px; height: 458px;" src="http://m.bomoda.com/static/img/email/retention_email/A.jpg" />    
        </td> 
    </tr>
</table>

如您所见，650 宽的表格只有一行，其中三个td。它们的宽度分别为 18、297 和 315，总共等于 630（考虑到表格的左右边框为 10 宽）。但是当我在chrome中使用开发者工具查看每个的宽度时td，它显示每个的计算宽度分别td为17.27272605895996、296.3636169433594和315.45452880859375，加起来不能达到630。所以表格边框之间会有一个小间隙和最右边的图片。

4

1 回答 1

0

尝试在所有 colspan'd 行上方放置一个 2 cols 的空行。有时，当您未在表格的第一行中指定 col 宽度时，您可能会遇到问题。

不确定这是否能解决您的问题，但我过去曾遇到过没有先设置 col 宽度的问题......

于 2013-01-23T19:37:00.190 回答