带Outlook 2013的HTML电子邮件 - 边界左和td对齐问题
问题描述:
我正在处理html电子邮件签名,并且正在拉我的头发,试图使其与Outlook 2007,2010和2013一起工作。在其他每个电子邮件客户端它看起来就像我想要的那样。这里就是我要去为:带Outlook 2013的HTML电子邮件 - 边界左和td对齐问题
这里就是我看到在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:[email protected]">[email protected]</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。
2. Use 600px for the width of table。
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:[email protected]">[email protected]</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>
感谢阿里。我使用石蕊进行了测试,Outlook 2013仍然不正确。见截图:http://cl.ly/image/060g1B2I3H3Q。我还需要将css内联,因为我只是想将电子邮件签名发给我的同事。 – Normc
@Normc我很抱歉回复迟了,我在outlook(hotmail.com)中检查了它,[它工作](http://s22.postimg.org/r70dyacox/Capture.png)。 1-保存html文件。 2 - 在浏览器中打开它。 3 - 全选(不在视图中,我的意思是网页视图)并复制。 4-最后,粘贴它的前景。 – Alex