简体   繁体   English

具有Outlook 2013的HTML电子邮件-左边框和TD对齐问题

[英]HTML email with Outlook 2013 - border-left and td alignment issue

I'm working on an html email signature and am pulling my hair out trying to get it to work with outlook 2007, 2010 and 2013. In every other email client it looks just as I want it to. 我正在研究html电子邮件签名,并尝试将其与Outlook 2007、2010和2013配合使用。在其他所有电子邮件客户端中,它的外观都与我想要的一样。 Here's what I'm going for: 这就是我要去的地方:

预期的电子邮件签名

Here's what I'm seeing in Outlook 2007, 2010 and 2013: 这是我在Outlook 2007、2010和2013中看到的内容:

Outlook中的电子邮件签名

The second cell alignment is off and the left border on the table isn't visible. 第二个单元格对齐方式已关闭,表格的左边框不可见。 Can any figure out what I'm doing wrong based on my code pasted below? 任何人都可以根据下面粘贴的代码找出我在做什么错吗? Thanks so much in advance! 非常感谢!

<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>

1. Outlook does not support margin . 1. Outlook不支持保证金

2. Use 600px for the width of table . 2. 使用600px作为表格的宽度

Fixed link 固定链接

HTML 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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM