Question

我有一个按钮，为了使它在Outlook 2007/10（！）中工作，我必须将三个元素 - 左图像，中间文本，右图像 - 放在一个更大的表中的自己的嵌套表中。但是，这导致Outlook 2007/10中经常引用的问题，表格之间存在差距，根据：http://postimg.org/image/44odkv6v3/（我故意改变了该图像中间表的背景颜色它更明显，但它们实际上是相同的）。

以下是该按钮的代码。显然，它上面有html head body等等。

我已尝试在img和桌子上显示属性，宽度，对齐，边框/填充/边距= 0 ......我已经尝试了我在网上找到的所有解决方案，没有任何修复方法！

任何想法，还有其他感激之情！

注意：这在Outlook中全面发生，而不仅仅是其中之一。

<tr>
<td style="width: 15px; font-size: 15px;" valign="top">&#160;</td>
<td align="center" valign="middle">
<table align="center" cellpadding="0" cellspacing="0" height="40" width="243" border="0" style="margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; background-color: #f2f2f2;" valign="middle">
<tbody valign="middle">
<tr height="40">
    <td height="40">
    <table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="22" style="margin: 0; border: 0; padding: 0; width: 22px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
    <tbody>
    <tr>
        <td height="40" width="22" style="background-color: #f2f2f2;"><a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
        <img align="right" height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="22" /></a></td>
    </tr>
    </tbody>
    </table>
    <table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block; border-left: 1px solid #ec6608;" valign="middle">
    <tbody>
    <tr style="background-color: #ec6608;">
        <td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;"><a href="#" style="text-decoration:none; color:#ffffff" target="_blank">Text goes here</a></td>
    </tr>
    </tbody>
    </table>
    <table align="left" border="0" cellpadding="0" cellspacing="0" height="40" width="36" style="margin: 0; border: 0; padding: 0; width: 36px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #f2f2f2; mso-table-lspace:0pt; mso-table-rspace:0pt; display: block;" valign="middle">
    <tbody>
    <tr>
        <td height="40" width="36" style="background-color: #f2f2f2;"><a href="#" target="_blank"><img align="right" height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" /></a></td>
    </tr>
    </tbody>
    </table>
    </td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15px; font-size: 15px;" valign="top">&#160;</td>

Answer 1

您需要在table-layout代码中指定<table>。如果仍然无法正常工作，则需要将表格布局更改为浮动/显示布局。

 <table style="table-layout: fixed; [.....]">

浮动布局如下：

 <a href="..." style="float:left;"><img ....>

Answer 2

我感觉到你的痛苦！多年来一直在制作电子邮件模板并与Outlook进行这些战斗。答案是你需要尽一切努力使最简单的小部分工作。我会将每个单元格的背景颜色设为橙色，并将左图像对齐左侧，右侧对齐https://jsfiddle.net/0gncaogm/。

我还添加了类（以配合你的内联宽度），使单元格成为max-width with overflow-x：hidden ...

img{
    display:inline-block;
    margin-top:0;
    margin-right:0;
    margin-left:0;
    margin-bottom:0;
}
.leftedge{
    max-width:15px;
    overflow-x:hidden;
}
.rightedge{
    max-width:36px;
    overflow-x:hidden;
}

在HTML ...

中

<td height="40" width="36" style="background-color: #e76823;" align="right>    
    <a href="#" target="_blank">
        <img align="right" height="40" src="http://www.tonytansley.co.uk/so/right.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px; display: block;" width="36" />
    </a>
</td>

Answer 3

这个令人惊讶的强硬！我发现问题的一部分是由外部表上的align =“center”引起的，导致Outlook 2003和Live Mail中出现3px的差距。如果你仍然需要它与中心对齐，我会将此代码包装在具有该属性的另一个表中。为了解决剩下的问题，我删除了额外的表并添加了对应的TD。我还补充说“边界崩溃：崩溃;”到你的桌子。您现在应该在桌面Outlook客户端中看不到间距。

<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
    <tr>
        <td height="40" width="22" align="left">
                    <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                        <a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
                            <img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
                        </a>
                    </p>
        </td>
        <td height="40" width="180" align="left">
            <table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
                <tbody>
                    <tr>
                        <td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
                            <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                                <a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text goes here</a>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td height="40" width="36" align="left">
                    <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                        <a href="#" target="_blank">
                            <img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
                        </a>
                    </p>
        </td>
    </tr>
</tbody>

HTML电子邮件中的Outlook表空间 - 没有通常的技巧

3 个答案: