2015-11-03 53 views
0

背景:我建立和發送電子郵件營銷,因爲iOS9釋放我們所有的客戶提供這種IOS版本在郵件應用中打開我們的電子郵件時遇到此問題:的iOS 9電子郵件 - 文字重疊圖片橫幅

this

你可以在屏幕截圖中看到的是重疊橫幅的文字,它也與公司徽標重疊。看起來文字首先加載,然後橫幅加載時文字不會被壓低。

的頭模塊(與標誌),橫幅和文本模塊的代碼如下

<table id="header-table" width="100%" cellspacing="0" cellpadding="0" border="0" align="center"> 
    <tr> 
    <td> 
     <table width="640" cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto;"> 
     <tr> 
      <td width="100%" style="padding:10px 15px;"> 
      <table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="left"> 
       <tr> 
       <td class="logo" width="300" valign="top" align="center" style="mso-table-lspace:0;mso-table-rspace:0;"> 
        <a rilt="Logo" target="_blank" href="http://www.aaa.com"><img width="300" height="125" border="0" style="display:block;" src="Logo.jpg" alt="aaa" class="deviceWidth" /></a> 
       </td> 
       </tr> 
      </table> 
      <table class="deviceWidth" cellpadding="0" cellspacing="0" border="0" width="300" align="right"> 
       <tr class="hide"> 
       <td align="right" style="padding:25px 0px 10px 0px;mso-table-lspace:0;mso-table-rspace:0;"> 
        <table cellpadding="0" cellspacing="0" border="0"> 
        <tr> 
         <td valign="middle" align="right"> 
         <a class="telephone" href="tel:1800-555-555" style="color:#58585a; font-size:16px; text-decoration:none;"><img width="25" border="0" style="display:block;" src="/contentlibrary/cell/base/images/phone.png" alt=""/></a> 
         </td> 
         <td valign="middle" align="right" style="padding:0px 0px 0px 5px;font-family:arial;font-size:14px;line-height:14px;color:#B5ADA6;"> 
         <a class="telephone" href="tel:1800-500-260" style="color:#B5ADA6; font-size:14px; text-decoration:none;">1800 555 555</a> 
         </td> 
        </tr> 
        </table> 
       </td> 
       </tr> 
       <tr> 
       <td class="deviceWidth nav" valign="top" align="right" style="padding:0px 0px 0px 0px;font-family:arial;font-size:11px;line-height:13px;color:#7E7774;"> 
        <a rilt="TNavReds" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/red-wine?product-type=straight-cases">Chairs</a> | <a rilt="TNavWhites" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/white-wine?product-type=straight-cases">Sofas</a> | <a rilt="TNavMixes" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/mixed-cases">Shirts</a> | <a rilt="TNavSparkling" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/sparkling?product-type=straight-cases">Pants</a> <span class="hide" >| <a rilt="TNavClearance" target="_blank" style="text-decoration:none;color:#7E7774;" href="http://www.cellarmasters.com.au/wine-clearance">Shoes</a></span> 
       </td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

<table id="banner-module" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background-color:#E5E0D9;"> 
    <tr> 
    <td> 
     <table width="640" align="center" cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;"> 
     <tr> 
      <td width="100%" align="center"> 
      <a rilt="TopBanner" href="http://www.aaa.com?utm_link=TopBanner" target="_blank"><img width="640" height="400" border="0" style="display:block;" src="Banner.jpg" alt="Banner" class="deviceWidth"/></a> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

<table id="1col-module-1" width="100%" min-width="100%" cellpadding="0" cellspacing="0" border="0"> 
    <tr> 
    <td> 
     <table width="640" cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 0 auto;"> 
     <tr> 
      <td class="copy" width="100%" valign="top" align="left" style="font-family:arial;font-size:13px;line-height:16px;color:#000001;padding:30px 10px 10px 10px;"> 
      Hi $First_Name$, 
      <br /><br /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent iaculis luctus elit ornare tempus. Phasellus eget luctus nisi. Mauris vel orci adipiscing, placerat velit nec, laoreet purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam et mi erat. 
      <br /> 
      <br /> 
      Quisque malesuada massa in mi tristique, tincidunt consequat ligula tempor. Maecenas sollicitudin sem quis ipsum tristique adipiscing. Aenean tincidunt tortor lectus, vel ultricies lectus condimentum ut. 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 

回答

0

如果你旋轉屏幕爲橫向和翻轉回縱向它迫使電子郵件正確渲染 - 但這不是一個理想的長期解決方案