带有 Outlook 2013 的 HTML 电子邮件 - 左边框和 td 对齐问题答案

【问题标题】：HTML email with Outlook 2013 - border-left and td alignment issue带有 Outlook 2013 的 HTML 电子邮件 - 左边框和 td 对齐问题
【发布时间】：2015-10-07 02:09:54
【问题描述】：

我正在处理一个 html 电子邮件签名，并且正在努力让它与 Outlook 2007、2010 和 2013 一起使用。在其他所有电子邮件客户端中，它看起来都如我所愿。这就是我的目标：

这是我在 Outlook 2007、2010 和 2013 中看到的：

第二个单元格对齐已关闭，表格的左边框不可见。任何人都可以根据下面粘贴的代码找出我做错了什么吗？提前非常感谢！

<meta name="format-detection" content="telephone=no">

<table style="border-collapse:collapse;margin-left:-8px;border-left: 7px solid #9d2235;" width="100%" cellpadding="15px">
    <tbody>
        <tr>
            <td width="100px" bgcolor="#e5e5e5" style="border: 3px solid #e5e5e5;vertical-align: top;padding-left:15px;padding-right:15px;">
                <a href="https://canada.ntm.org"><img src="https://canada.ntm.org/files/email-sig-files/NTMC%20Logo%20red.png" alt="NTMC Canada" width="100" height="46" /></a>
            </td>
            <td  bgcolor="#e5e5e5" style="border: 3px solid #e5e5e5;text-align:left;color:#333;font-family:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,'Lucida Grande',sans-serif;font-weight: 300;vertical-align: top;font-size:14px;padding-bottom:7px;padding-top:7px">
                <strong>Norm Copeland</strong><br>
                <a style="text-decoration:none;color:#333" href="mailto:norm_copeland@ntm.org">norm_copeland@ntm.org</a><br>
                844-855-6862 x213<br>
                <a style="text-decoration:none;color:#9d2235" href="https://canada.ntm.org">canada.ntm.org</a>
            </td>
        </tr>
    </tbody>
</table>

【问题讨论】：

标签： html css email outlook

【解决方案1】：

1.Outlook does not support margin。

2.Use 600px for the width of table.

Fixed link

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
    <head>
        <style type="text/css">
            *
            {
                padding:0px;
                margin:0px;
                font-family:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,'Lucida Grande',sans-serif;
            }

            a
            {
                text-decoration:none;
            }
        </style>
        <title>Outlook</title>
    </head>

    <body>
        <table style="margin: 0 auto;" width="600px" height="85px" cellpadding="0px" cellspacing="0px" border="0" align="center">
            <tbody>
                <tr>
                    <td width="7px" bgcolor="#9d2235"></td>
                    <td width="160px" bgcolor="#e5e5e5" style="text-align:center;">
                        <a href="https://canada.ntm.org"><img src="https://canada.ntm.org/files/email-sig-files/NTMC%20Logo%20red.png" alt="NTMC Canada" width="100" height="46" /></a>
                    </td>
                    <td width="433px" bgcolor="#e5e5e5" style="text-align:left;color:#333;font-weight: 300;font-size:14px;">
                        <strong>Norm Copeland</strong><br>
                        <a style="text-decoration:none;color:#333" href="mailto:norm_copeland@ntm.org">norm_copeland@ntm.org</a><br>
                        844-855-6862 x213<br>
                        <a style="text-decoration:none;color:#9d2235" href="https://canada.ntm.org">canada.ntm.org</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

【讨论】：

谢谢 alireza。我使用石蕊进行了测试，但 Outlook 2013 仍然不正确。见截图：cl.ly/image/060g1B2I3H3Q。我还需要保留 css 内联，因为我只是想将电子邮件签名分发给我的同事。
@Normc 很抱歉回复晚了，我在 Outlook(hotmail.com) 中查看过，it worked。 1-保存html文件。 2-在浏览器中打开它。 3-全选（不在查看源代码中，我的意思是网络视图）并复制。 4-最后，将其粘贴到outlook中。