iPad的電子郵件模板問題

所以，我有這樣的HTML郵件：iPad的電子郵件模板問題

<!Doctype HTML><html> 
<head> 
    <!-- Meta --> 
    <meta charset="utf-8"> 
</head> 
<table style=" width: 100%; box-shadow: 0px 0px 5px 0px #a5a5a5;"> 
    <tr class="header"> 
     <td class="logo" style="padding-top: 10px; padding-left: 20px;"> 
      <img src="header_logo.png" alt="Logoimage"/> 
     </td> 
    </tr> 
</table> 
<table style="width: 100%; box-sizing: border-box; box-shadow: 0px 1px 5px 0px #a5a5a5;"> 
    <tr style="width: 100%; display: block;"> 
     <td style=""><h2>Congratulations on your new website!</h2></td> 
     <td class="content" style="margin-top:20px; display: block; clear:both; min-width: 100%;"> 
      General description here.. write whatever you want. 
     </td> 
    </tr> 
    <tr style="width: 100%; display: block;"> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; width: 100%; display: block;"><h2>Account information</h2></td> 
     <td class="content" style="margin-top:20px; width:100%; display: block;"> 
      <h3 style="margin: 0">First name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_FIRST_NAME!!</span></h3> 
      <h3 style="margin: 0">Last name:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_LAST_NAME!!</span></h3> 
      <h3 style="margin: 0">Email:<span style="font-weight: normal; margin-left: 10px;">!!CUSTOMER_EMAIL!!</span></h3> 
      <h3 style="margin: 0">Phone:<span style="font-weight: normal; margin-left: 10px;">!!PHONE!!</span></h3> 
     </td> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; width: 100%"><h2>Property information</h2></td> 
     <td class="content" style="margin-top:20px; width: 100%; display: block;"> 
      <h3 style="margin: 0">Listing Site:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_IS_LISTED!!</span></h3> 
      <h3 style="margin: 0">Listing Number:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_ID!!</span></h3> 
      <h3 style="margin: 0">Property Name:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_NAME!!</span></h3> 
      <h3 style="margin: 0">Address:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STREET_ADDRESS!!</span></h3> 
      <h3 style="margin: 0">City:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_CITY!!</span></h3> 
      <h3 style="margin: 0">State:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3> 
      <h3 style="margin: 0">Country:<span style="font-weight: normal; margin-left: 10px;">!!PROPERTY_STATE!!</span></h3> 
     </td> 
    </tr> 
    <tr style="margin-top: 10px; padding-bottom:5px; width: 100%; display: block;"> 
     <td style="text-transform: uppercase; border-bottom: 1px dotted #CFE1EF; height: 40px; margin-bottom: 10px; display: block;"><h2>your site</h2></td> 
     <td class="content" style="margin-top:20px; display: block;"> 
      <h3 style="margin: 0">Site URL:<span style="font-weight: normal; margin-left: 10px;">!!SITE_URL!!</span></h3> 
      <h3 style="margin: 0">Design name:<span style="font-weight: normal; margin-left: 10px;">!!DESIGN_NAME!!</span></h3> 
      <img style="width:100%; margin-top: 20px;" src="http://vsbtest.com/Latestwizard/images/designs/design3.jpg" alt="Site template preview"/> 
     </td> 
    </tr> 
</table> 
<table style="width: 100%; height: 55px; background: #fff; z-index:5; box-shadow: 0px 1px 5px 0px #a5a5a5;"> 
    <tr class="copyright"> 
     <td style="padding-top: 10px; padding-left: 20px; display: block; clear:both;">&copy; 2013</td> 
    </tr> 
</table></html>

並顯示，因爲我想（全寬表格單元格）上主要的電子郵件客戶端 - Gmail中，雷鳥，Android版Gmail應用，但是當使用從iPad的電子郵件應用程序它不工作好..它不「採取」100％的寬度，並把所有的表格單元格放在一行。我知道我可以通過在單獨的行中輕鬆添加每個單元格來解決此問題，但除非沒有其他解決方案，否則我不想要這樣做。

你有什麼想法爲什麼會發生這種情況？我不明白爲什麼。它應該看起來像這樣：http://jsfiddle.net/6YqmL/1/

來源

2013-10-07 Răzvan Nechifor

您使用不正確的HTML。你必須添加一個'' - 標籤。請首先檢查您的html的有效性（例如W3c驗證程序）。 – urzeit

這個問題似乎是題外話題，因爲它是一個錯字。 – 2013-10-07 13:45:53

這不是一個錯字。我不好意思，我忘了在代碼中添加標籤，但這沒有什麼區別。無論有沒有標記，效果都是一樣的。 –

html-email中不一致地支持標頭標籤。而不是使用<h3>，請嘗試在表格單元格或字體標籤中對它們進行造型，並使用雙<br>將它們分開。

來源

2013-10-07 14:03:35 John

iPad的電子郵件模板問題

回答

相關問題