2016-05-12 55 views
2

我在Outlook 2003,2007,2010,2013中的郵件中顯示頁腳的問題。 Outlook不尊重所需的表格寬度,將整個腳放在左側。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> 

在圖片頂部 - 正確的頁腳,下面 - 在Outlook頁腳

enter image description here

回答

0

當涉及到HTML電子郵件,你真的需要回去基礎知識。這意味着你不應該使用div元素,因爲較老的客戶可能無法正確渲染它們。想90年代的HTML;)

你可以嵌套表,所以用這個來分割佈局,並且爲了測試,我推薦給酸性郵件。

+0

是的,我知道這不是推薦的divs,因爲從理論上來說,許多瀏覽器和郵件客戶端都不支持,但我使用這個示例http://webdesign.tutsplus.com/tutorials/creating-a-future-proof -responsive-email-without-media-queries - cms-23919並且此代碼有效。我在酸性電子郵件上檢查過它,這是最好的解決方案。在我僅以表格爲基礎創建通訊之前,它看起來更糟。 – emka26

相關問題