1

我有一份电子通讯,我必须为我们的一位客户编写代码。在编写完所有代码后,我通过我们的 Constant Contact 帐户发送了一个测试。我测试了 Gmail、Yahoo 和 Mac Mail,它们运行良好。当我将它发送到 Outlook 2013 电子邮件时,它无法正确显示。我正在使用嵌套表。给出问题的特定位置是 id="visa" 的表。我还附上了它的外观截图。

当我在 Outlook 2013 中打开电子邮件并单击操作 --> 编辑消息时,我右键单击签证区域并选择表属性。我注意到首选宽度框是黑色但未选中。如果我转到左上角单元格的属性,其中显示“转移您的余额和..”,然后单击“首选宽度”框,那么所有内容都正确排列,没有空间。

为什么 Outlook 2013 不接受我在 HTML 中提供的宽度?我可以做些什么来自动执行此操作,以便 Outlook 收件人可以正确看到时事通讯。

这是我的代码:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>index.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">    td img {border-width: 0px;
        display: block;
    }

</style>

</head>
<body bgcolor="#ffffff"> <!-- 'Myriad Pro', Arial,sans-serif; -->
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="font-family:'Myriad Pro', Arial,sans-serif; border:1px solid black;">

  <tr>
   <td colspan="3" style="vertical-align:top; padding:0;"><a href="https://www.rbfcu.coop/" target="_blank"><img name="index_r1_c1" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/header.jpg" width="600" height="134" border="0" id="index_r1_c1" alt="" /></a></td>
  </tr>
  <tr>
<!--=====================================
== LEFT SIDE RAIL START (nested table)
=========================================-->
    <td width="209" style="vertical-align:top; padding:0; background-color:#e0e6f4;">
        <table border="0" cellpadding="0" cellspacing="0" width="209" style="font-family:'Myriad Pro', Arial,sans-serif; font-size:11px;">
            <tr>
                <td style="vertical-align:top; padding:20px 0 0 0;"><img name="vacation" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/keyboard.jpg" width="209"  border="0" id="vacation" alt="" /></td>
            </tr>
            <tr>
                <td style="vertical-align:top; padding:0;">
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:15px;"><strong>Money Moves To Make<br />
                        This Season</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">As the year starts winding down,<br />
                        here are some smart moves to make<br />
                        with your money to maximize your<br />
                        earnings and save through the<br />
                        winter.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Give Yourself A Checkup</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">Use a free online budgeting and<br />
                        money management tool, like the<br />
                        resources on our<a href="http://www.rbfcu.coop/services/financial-services/members-financial-services.html" target="_blank"> Members Financial<br />
                        Services Page</a> or the one on Mint.<br />
                        com to make it easy, or review<br />
                        your credit union statements and<br />
                        check for areas where you may be<br />
                        overspending. Also, review your<br />
                        health care coverage and see if you<br />
                        can save if you change to a different<br />
                        plan during open enrollment.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Prepare For Holiday Spending</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">To avoid one massive bill at the end<br />
                        of the year, start shopping now and<br />
                        finish before things get crazy. Also,<br />
                        paying off your credit card bills every<br />
                        month will help you save on interest<br />
                        charges.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Put More Into<br />
                        Retirement Accounts</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">Contribute the maximum amount<br />
                        possible to prepare for the future.</p>
                    <p style="margin:10px 0 0 15px; color:#2063af; font-size:14px;"><strong>Weatherproof Your Home</strong></p>
                    <p style="margin:5px 0 0 15px; line-height:15px;">Prepare your home for colder<br />
                        weather by caulking windows,<br />
                        weatherstripping doors, making<br />
                        sure you have enough insulation<br />
                        and getting a tune&#45;up on your<br />
                        heating unit. It could save you tons<br />
                        in heating costs.</p>
                </td>
            </tr>
        </table>
    </td>
   <td width="22" style="vertical-align:top; padding:0;">
       &nbsp;</td>
<!--=====================================
== BODY START (nested table)
=========================================-->
   <td width="369" style="vertical-align:top; padding:0;">
        <table border="0" cellpadding="0" cellspacing="0" width="369" style="font-family:'Myriad Pro', Arial,sans-serif; font-size:11px;">
            <tr>
                <td width="369" style="vertical-align:top; padding:0;">
                    <table id="visa" border="0" cellpadding="0" cellspacing="0" width="369" style="width:369px; font-family:Arial,sans-serif; font-size:9px;">
                        <tr>
                            <td width="132" style="vertical-align:top; padding:0; ">
                                <p style="margin:5px 0 0 0; color:#2063af; font-size:12px;"><strong><span style="font-size:13px;">Transfer Your<br />Balance And Save</span><br />
                                    Lower Your Monthly<br />
                                    Credit Card Payment</strong></p>
                            </td>
                            <td width="74" style="vertical-align:top; padding:0;">
                                <p style="margin:0;">
                                    <img style="display:block;" name="n1500477RaritanBayAug_e_NL151_r1_c2" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r1_c2.jpg" width="74" border="0" id="n1500477RaritanBayAug_e_NL151_r1_c2" alt="" />
                                </p>
                            </td>
                            <td width="163" style="vertical-align:top; padding:0;">
                                <p style="margin:0;">
                                    <img style="display:block;" name="n1500477RaritanBayAug_e_NL151_r1_c3" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r1_c3.jpg" width="163" border="0" id="n1500477RaritanBayAug_e_NL151_r1_c3" alt="" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" style="vertical-align:top; padding:0;">
                                <p style="margin:5px 0 0 0; line-height:15px;">If you're currently paying too much interest<br />
                                    on your credit card balance, RBFCU can<br />
                                    help lower your monthly payment. Transfer<br />
                                    your high-interest debt from other credit<br />
                                    cards to the Raritan Bay FCU Platinum Visa&reg;<br />
                                    and you could lower the monthly payment<br />
                                    on your existing balance. With no balance<br />
                                    transfer fee and a fixed rate as low as 9.99%<br />
                                    APR* you could save big.
                                </p>
                                <p style="margin:5px 0 0 0;">Other Advantages Include:</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>No annual or balance transfer fees</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>24/7 customer service</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>25-day grace period on new purchases</p>
                                <p style="margin:5px 0 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Valuable ScoreCard&reg; Rewards Points</p>
                                <p style="margin:5px 0 0 0;">Don't miss this chance to save.</p>
                            </td>
                            <td width="163" style="vertical-align:top; padding:0;">
                                <p style="margin:0;">
                                    <img style="display:block;" name="n1500477RaritanBayAut_e_NL151_r2_c3" src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/index_r2_c3.jpg" width="163" border="0" id="n1500477RaritanBayAug_e_NL151_r2c3" alt="" />
                                </p>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3" style="vertical-align:top; padding:0;">
                                <p style="margin:10px 0 0 0; color:#2063af; font-size:12px;"><strong>Apply Today!</strong></p>
                                <p style="margin:5px 0 0 0;">Apply online today or call (732) 727-3500 ext. 220.</p>
                                <p style="margin:5px 0 10px 0; font-size:8px;">*APR = Annual Percentage Rate. Qualified borrowers only. Rate subject to change without notification. Contact the credit union for complete details. Other rates available based on creditworthiness.</p>
                            </td>
                        </tr>
                    </table>                 
                    
                </td>
            </tr>
            <tr>
                <td style="vertical-align:top; padding:10px 0 0 0; border-top:1px solid #0167b1;">
                    <table border="0" cellpadding="0" cellspacing="0" width="369" style="font-family:'Myriad Pro', Arial,sans-serif;">
                        <tr>
                            <td width="185" style="vertical-align:top; padding:0; font-size:11px; border-right:1px solid #0167b1;">
                                <img src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/chalkboard.jpg" width="185" />
                                <p style="margin:10px 0 0 0; color:#2063af; font-size:15px;"><strong>Take A Deserved Break<br />
                                    With A Teacher Loan</strong></p>
                                <p style="margin:5px 0 0 0;">A Teacher Loan* from Raritan Bay<br />
                                    FCU is perfect for educators, since<br />
                                    you can take two months off of<br />
                                    your payments. Borrow at a low<br />
                                    rate for whatever you need and<br />
                                    don&rsquo;t worry about paying during<br />
                                    the summer break.</p>
                                <p style="margin:5px 0 0 0; color:#2063af; font-size:14px;"><strong>Advantages Include:</strong></p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Low rates</p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Auto and signature loans</p>
                                <p style="margin:3px 10px 0 13px;">available</p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Make only 10 payments per</p>
                                <p style="margin:3px 10px 0 13px;">year</p>
                                <p style="margin:5px 10px 0 0;"><span style="color:#0167b1;">&#9632;&nbsp; </span>Skip two months of loan</p>
                                <p style="margin:3px 10px 0 13px;">payments</p>
                                <p style="margin:5px 0 0 0;">Call us at (732) 727&#45;3500 ext.<br />
                                    220 and ask about our Teacher&rsquo;s<br />
                                    Loan option today.</p>
                                <p style="margin:5px 0 0 0; font-size:8px;">*Qualified borrowers only. Interest will continue<br />
                                    to accumulate on your loan during the months a<br />
                                    payment is not made. Please contact a Credit Union<br />
                                    Representative for rates, terms and conditions.</p>
                            </td>
                            <td width="184" style="vertical-align:top; padding:0; font-size:11px;">
                                <p style="margin:0 0 0 0;"><img src="https://www.mpsecureapps.com/clients/raritan_bay/15-00477/images/back_to_class.jpg" width="184" /></p>
                                <p style="margin:10px 0 0 10px; color:#2063af; font-size:14px;"><strong><span style="font-size:15px;">Head Back To Class With<br />
                                    Everything You Need</span><br />
                                    <em>With A Raritan Bay FCU<br />
                                        <a style="color:#0167b1;" href="http://www.rbfcu.coop/loans/promo-loan.html" target="_blank">Back To School</a> Loan</em></strong></p>
                                <p style="margin:5px 0 0 10px;">It&rsquo;s that time of year again, when<br />
                                    you need to shop for school<br />
                                    supplies, books, clothes, computers<br />
                                    and other items for the upcoming<br />
                                    school year. Raritan Bay FCU makes<br />
                                    it easier for parents and students<br />
                                    with a special low&#45;rate Back to<br />
                                    School Loan.</p>
                                <p style="margin:5px 0 10px 10px; font-size:8px;">*APR = Annual Percentage Rate. Qualified borrowers only. Rates subject to change without notification.</p>
                                <hr style="color:#0167b1; width:170px" />
                                <p style="margin:10px 0 0 10px; color:#2063af; font-size:14px;"><strong>Holiday Closing</strong></p>
                                <p style="margin:5px 0 0 10px;">Labor Day<br />
                                    Monday, September 7, 2015</p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
   </td>
  </tr>
</table>
</body>
</html>

4

1 回答 1

2

您可能知道(因为您使用的是表格),Outlook 有很多怪癖。Outlook 2007/2010/2013/2016(Windows 版本)均使用 Microsoft Word HTML 渲染引擎。

Email on Acid 是一项非常有用的服务,可用于在各种客户端和设备中测试电子邮件呈现。他们还提供了修复这些客户端中常见错误的提示。查看他们关于 Outlook 的免费 PDF 提示(来自此博客文章)。

这个问题特别要注意:

第 1 步:将border-collapse 属性添加到您的嵌入式CSS

步骤 2. 将每个表格标签中的边框、单元格填充和单元格间距归零。<table border="0" cellpadding="0" cellspacing="0">

第 3 步。如果您尝试“右”或“左”对齐多个嵌套表,则修复涉及更多。

在这种情况下,您可能会看到表之间存在很大的间隙。以下是纠正该问题的步骤:

  1. 为对齐表格中的每个 TD 添加一个 bgcolor - 根据您的布局选择颜色。

  2. 为对齐的表格添加 1px 边框 - 这应该设置为与其中的 td 相同的颜色。

  3. 将对齐表格的宽度减小 2px 以适应边框。

  4. 将第一个 TD 的内容包装在一个段落标签中。使用以下样式设置该段落标签:mso-table-lspace:0;mso-table-rspace:0; </p>

这是一个从头到尾的示例:

<style type="text/css">
  table {border-collapse: collapse;}
</style>
<table border="0" width="600" cellspacing="0" cellpadding="0">
  <tr> <td>
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99">
      <tr>
        <td bgcolor="#00CC99"><p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 1</p></td> </tr>
      <tr>
        <td bgcolor="#00CC99">Content in 1</td>
      </tr>
    </table>
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF">
      <tr>
        <td bgcolor="#33FFFF"><p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 2</p></td> </tr>
      <tr>
        <td bgcolor="#33FFFF">Content in 2</td>
      </tr>
    </table>
    <table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366">
      <tr>
        <td bgcolor="#993366"><p style="mso-table-lspace:0;mso-table-
rspace:0;">Content in 3</p></td> </tr>
      <tr>
        <td bgcolor="#993366">Content in 3</td>
      </tr>
    </table>
  </td> </tr>
</table>
于 2016-01-05T10:16:41.047 回答