Outlook 2013仅HTML电子邮件中的图像差距

时间:2013-03-07 15:51:34

标签: html image email outlook-2013

我在Outlook 2013中遇到的HTML电子邮件问题,在2007年和2010年的早期版本中看起来很棒。

我添加了style =“display:block; 我的桌子和td有黑色背景颜色。 我尝试在td和img上指定宽度和高度 和上一篇文章中建议的包含td的行高样式。

以下是代码:

<table width="200" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="158" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 20px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table>

包含代码:

<table width="510" align="center" cellpadding="0" cellspacing="0" style="" bgcolor="#000000">
            <tbody>
                <tr>
                    <td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 12px; line-height: 20px; padding: 0px 30px 0px 40px; ">
                    <table width="180" cellpadding="0" cellspacing="0" align="right" bgcolor="#000000"><tr><td width="156" height="168" style="background-color:#000000; line-height:13px;"><img src="http://identifix.skmgroupwork.com/email/iden074/images/JerryGTruglia.jpg" width="156" height="158" align="right" alt="Jerry G Truglia" style="padding: 0px 0px 0px 0px; width: 156px; height: 158px;display:block;"></td></tr></table><span style="color:#feae38;font-size:16px;"><b>Don’t Miss Your Chance to Catch<br>Identifix&rsquo;s Live Training, <span class="appleLinksWhite">3/12.</span></b></span><br><br>Seats are filling up quickly, so be sure to RSVP today for &ldquo;Find and Fix Faster – Your Path to More Profits,&rdquo; Identifix&rsquo;s live training event. Held <span class="appleLinksWhite" style="color: #ffffff;">on Tuesday, March 12th,</span> the session will be conducted by nationally recognized automotive industry expert, Jerry &ldquo;G&rdquo; Truglia, president of Automotive Technician Training Services (ATTS).<br><br>
                    <span style="color:#feae38;font-size:14px;"><b>Learn how your shop can:</b></span><br><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Diagnose and repair vehicles faster</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Reduce non-billable work time</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Boost customer trust and satisfaction</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Increase tech confidence and productivity</b></span><br>
                    <img style="display:inline;" src="http://identifix.skmgroupwork.com/email/iden074/images/bulletSM.jpg"><span style="font-family: Arial, Helvetica, sans-serif;color:#feae38;font-size:13px;"><b>&nbsp;Stay profitable</b></span><br><br>
                    Join us <span class="appleLinksWhite" style="color: #ffffff;">from 7:30 &ndash; 9:00 p.m.</span> at <a style="color:#feae38;" target="_blank" href="https://plus.google.com/104076111016352099629/about?gl=us&hl=en">ATTS</a>, <span class="appleLinksWhite" style="color: #ffffff;">10 Lupi Plaza, Mahopac, NY 10541</span>. Pizza and soft drink will be provided, followed by a hands-on demonstration of Identifix’s award-winning online tool, Direct-Hit<sup>&reg;</sup>.<br>
                    <br><strong><span style="color:#feae38;font-size:16px;"><b>Reserve your seat before it’s too late!<br>Call <span class="appleLinksWhite" style="color: #ffffff;">1.855.270.5855</span> now to RSVP.<span style="color:#feae38;"><b></strong><br><br></td>
                </tr>
                <tr>
                    <td align="left" valign="top" colspan="2" style="padding: 14px 0px; "><img src="http://identifix.skmgroupwork.com/email/iden045/images/iden045-divider.gif" width="550" height="1" alt="" border="0" style="background-color: #ffffff; width: 570px; height: 1px; display: block; "></td>
                </tr>
                <tr>
                    <td colspan="2" align="left" valign="top" style="font-family: Arial, Helvetica, sans-serif; color: #ffffff; font-size: 11px; line-height: 16px; padding: 14px 0px 24px 40px;">
                    &#169;2013 Identifix | <span class="appleLinksWhite" style="color: #ffffff;">2714 Patton Road | Roseville, MN 55113</span> | <span class="appleLinksWhite" style="color: #ffffff;">1.800.745.9649</span></td>
                </tr>
            </tbody>
        </table>

任何建议表示赞赏。谢谢,

道格拉斯,我试图添加一张图片,但它说我需要至少10个声望来发布它,而我现在只有1个。它的链接是http://identifix.skmgroupwork.com/email/iden074/images/snip.JPG

仅在Outlook 2013上的石蕊测试中,出现了一个奇怪的白色,甚至没有对齐的间隙,在图像的右边不会出现。

3 个答案:

答案 0 :(得分:5)

以下为我工作:

<td style="line-height:0px; mso-line-height-rule:exactly;">

答案 1 :(得分:1)

此问题是否特定于Microsoft电子邮件客户端? 电子邮件如何在Web客户端上显示?

我在2013年和2007年都遇到过各种各样的问题。这些通常都是通过使用秘密的mso特定的css规则来解决的。

例如;使用mso-line-height-rule:完全;内联css将解决Outlook 2013推动所有tds的特别严重问题&lt; 15px out。

如果没有看到代码的其余部分,很难在代码中找出问题。

答案 2 :(得分:0)

你应该尽量不要使用colspans使它在所有客户端工作,如莲花笔记6.5和7