Outlook - 電子メールのフッタの表示幅が正しくない

Question

Outlook 2003,2007,2010、2013のメールでフッターの表示に問題があります。 Outlookはテーブルの必要な幅を考慮していません。足全体を左側に置きます。

以下のコードと画面。 ありがとうございました。絵の上部に

   <tr> 
       <td class="left-sidebar" style="padding: 0;text-align: center;font-size: 0" bgcolor="#191919"> 
        <!--[if (gte mso 9)|(IE)]> 
        <table width="100%"> 
        <tr> 
        <td width="220"> 
        <![endif]--> 
        <div class="column left" style="width: 100%;display: inline-block;vertical-align: middle;max-width: 220px"> 
         <table width="100%" style="border-spacing: 0;font-family: Arial, Helvetica, sans-serif;color: #333" cellpadding="0" cellspacing="0" border="0"> 
          <tr> 
           <td class="inner" style="padding-bottom:30px;padding-top:10px"> 
            <img src="#" width=210 alt="logo" style="border: 0;width: 100%;max-width: 210px"></a> 
           </td> 
          </tr> 
         </table> 
        </div> 
        <!--[if (gte mso 9)|(IE)]> 
        </td><td width="380"> 
        <![endif]--> 
        <div class="column right" style="width: 100%;display: inline-block;vertical-align: middle;max-width: 380px"> 

         <table width="100%" style="border-spacing: 0;font-family: Arial, Helvetica, sans-serif;color: #333" cellpadding="0" cellspacing="0" border="0"> 
          <tr> 
           <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 30px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;"> 
            Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. 
           </td> 
          </tr> 
          <tr> 
           <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 10px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;"> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed metus vitae justo blandit euismod non quis tortor. Pellentesque feugiat tempus viverra. Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. Aliquam elit lectus, semper vel augue nec, tempor aliquet felis!! 
           </td> 
          </tr> 
          <tr> 
           <td class="inner contents" style="padding: 10px;width: 100%;padding-top: 10px;font-size: 12px; color: #ffffff; font-weight: lighter; text-align: left; font-family: Arial, Helvetica, sans-serif; line-height: 18px;vertical-align: middle;"> 
            Nam semper magna nec urna sagittis, hendrerit dapibus nibh malesuada. Aliquam elit lectus, semper vel augue nec, tempor aliquet felis!! 
           </td> 
          </tr> 
          <tr> 
           <td height="50" style="height:50px"></td> 
          </tr> 
         </table> 
        </div> 
        <!--[if (gte mso 9)|(IE)]> 
        </td> 
        </tr> 
        </table> 
        <![endif]--> 
       </td> 
      </tr> 
     </table> 
     <!--[if (gte mso 9)|(IE)]> 
     </td> 
     </tr> 
     </table> 
     <![endif]--> 
    </div> 
</center> 

- 正しいフッタ、以下 - フッター見通し

で

Answer 1

それはHTMLメールに来るとき、あなたが本当に戻って行く必要があります基本に。これは、古いクライアントが正しくレンダリングできない場合があるため、実際にdiv要素を使用すべきではないことを意味します。 ）

テーブルをネストすることができますので、レイアウトを分割することができます。テストするには、酸で電子メールをお勧めします。