1

クライアントの 1 人のためにコーディングしなければならなかった e ニュースレターがあります。すべてをコーディングした後、Constant Contact アカウントからテストを送信しました。Gmail、Yahoo、および Mac メールをテストしたところ、問題なく動作しました。Outlook 2013 のメールに送信すると、正しく表示されません。ネストされたテーブルを使用しています。問題が発生する特定の場所は、id="visa" のテーブルです。どのように見えるかのスクリーンショットも添付しました。

Outlook 2013 で電子メールを開き、[アクション] --> [メッセージの編集] をクリックすると、Visa 領域を右クリックし、[テーブルのプロパティ] を選択します。優先幅ボックスは黒ですが、チェックされていません。「Transfer Your Balance And..」と表示されている左上のセルのプロパティに移動し、Preferred Width ボックスをクリックすると、すべてがスペースなしで正しく配置されます。

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. 埋め込み CSS に border-collapse プロパティを追加する

ステップ 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 に答える